:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100%;margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Inter,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:root{--color-primary-50: #f0f4ff;--color-primary-100: #e0e8ff;--color-primary-200: #c7d7fe;--color-primary-300: #a4bcfd;--color-primary-400: #8b9dfa;--color-primary-500: #6b7ef6;--color-primary-600: #5566ea;--color-primary-700: #4651d6;--color-primary-800: #3a42ad;--color-primary-900: #323a89;--color-accent-50: #fff1f2;--color-accent-100: #ffe1e4;--color-accent-200: #ffc7cd;--color-accent-300: #ffa0ab;--color-accent-400: #ff6b7d;--color-accent-500: #f5576c;--color-accent-600: #e03e54;--color-accent-700: #bc2e43;--color-accent-800: #9d2a3f;--color-accent-900: #86293d;--color-gray-50: #f8fafc;--color-gray-100: #f1f5f9;--color-gray-200: #e2e8f0;--color-gray-300: #cbd5e1;--color-gray-400: #94a3b8;--color-gray-500: #64748b;--color-gray-600: #475569;--color-gray-700: #334155;--color-gray-800: #1e293b;--color-gray-900: #0f172a;--color-bg-gradient-start: #eef5ff;--color-bg-gradient-end: #ffffff;--color-surface: #ffffff;--color-border: #e0e8f5;--color-border-hover: #c7d7fe;--color-text-primary: #0f172a;--color-text-secondary: #475569;--color-text-muted: #64748b;--shadow-xs: 0 1px 2px 0 rgba(15, 23, 42, .05);--shadow-sm: 0 2px 8px -2px rgba(15, 23, 42, .08);--shadow-md: 0 8px 24px -4px rgba(15, 23, 42, .1);--shadow-lg: 0 16px 48px -8px rgba(15, 23, 42, .12);--shadow-xl: 0 24px 64px -12px rgba(15, 23, 42, .15);--glow-primary: 0 8px 32px -4px rgba(107, 126, 246, .24);--glow-accent: 0 8px 32px -4px rgba(245, 87, 108, .24);--transition-fast: .14s cubic-bezier(.4, 0, .2, 1);--transition-base: .22s cubic-bezier(.4, 0, .2, 1);--transition-slow: .3s cubic-bezier(.4, 0, .2, 1);--transition-bounce: .4s cubic-bezier(.34, 1.56, .64, 1);--space-xs: .5rem;--space-sm: .75rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--space-2xl: 3rem;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 24px;--radius-full: 9999px}@media(prefers-color-scheme:dark){:root{--color-bg-gradient-start: #0a0f1e;--color-bg-gradient-end: #0f1729;--color-surface: #141b2e;--color-border: #1e2840;--color-border-hover: #2d3a5c;--color-text-primary: #f1f5f9;--color-text-secondary: #cbd5e1;--color-text-muted: #94a3b8;--shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, .3);--shadow-sm: 0 2px 8px -2px rgba(0, 0, 0, .4);--shadow-md: 0 8px 24px -4px rgba(0, 0, 0, .5);--shadow-lg: 0 16px 48px -8px rgba(0, 0, 0, .6);--shadow-xl: 0 24px 64px -12px rgba(0, 0, 0, .7)}}body{background:linear-gradient(180deg,var(--color-bg-gradient-start) 0%,var(--color-bg-gradient-end) 100%);background-attachment:fixed;color:var(--color-text-primary)}.app-root{min-height:100vh;width:100vw;display:flex;align-items:center;justify-content:center;padding:var(--space-lg);position:fixed;top:0;left:0}.card{width:100%;max-width:640px;background:var(--color-surface);border-radius:var(--radius-xl);padding:var(--space-2xl);box-shadow:var(--shadow-lg);border:1px solid var(--color-border);display:flex;flex-direction:column;gap:var(--space-lg);position:relative;overflow:hidden;transition:transform var(--transition-base),box-shadow var(--transition-base),border-color var(--transition-base)}.card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--color-primary-500) 0%,var(--color-primary-400) 50%,var(--color-primary-500) 100%);background-size:200% 100%;opacity:.8;animation:shimmer 3s ease-in-out infinite}@keyframes shimmer{0%,to{background-position:0% 0%}50%{background-position:100% 0%}}.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-xl);border-color:var(--color-border-hover)}.mic-button{width:96px;height:96px;border-radius:var(--radius-full);background:linear-gradient(135deg,var(--color-primary-500) 0%,var(--color-primary-600) 100%);border:none;color:#fff;font-size:1.5rem;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;align-self:center;position:relative;box-shadow:var(--glow-primary);transition:transform var(--transition-bounce),box-shadow var(--transition-base),opacity var(--transition-fast)}.mic-button:before{content:"";position:absolute;inset:-4px;border-radius:var(--radius-full);background:linear-gradient(135deg,var(--color-primary-400),var(--color-primary-600));opacity:0;z-index:-1;transition:opacity var(--transition-base)}.mic-button:hover:not(.disabled):before{opacity:.3;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{transform:scale(1);opacity:.3}50%{transform:scale(1.1);opacity:.15}}.mic-button:hover:not(.disabled){transform:translateY(-6px) scale(1.05);box-shadow:var(--glow-primary),var(--shadow-xl)}.mic-button:active:not(.disabled){transform:translateY(-2px) scale(1.02)}.mic-button.listening{background:linear-gradient(135deg,var(--color-accent-500) 0%,var(--color-accent-600) 100%);box-shadow:var(--glow-accent);animation:listening-pulse 1.5s ease-in-out infinite}@keyframes listening-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.08)}}.mic-button.listening:before{background:linear-gradient(135deg,var(--color-accent-400),var(--color-accent-700))}.mic-button.disabled{opacity:.5;cursor:not-allowed;box-shadow:var(--shadow-sm)}.mic-button:focus-visible{outline:3px solid var(--color-primary-300);outline-offset:6px}.mic-emoji{font-size:36px;line-height:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,.1))}.status{text-align:center;color:var(--color-text-secondary);font-size:1rem;font-weight:500;letter-spacing:.01em;transition:color var(--transition-base);min-height:24px}.status.listening{color:var(--color-accent-600);font-weight:600;animation:fade-in-up .3s ease-out}.status.loading{color:var(--color-primary-600);font-weight:600;animation:fade-in-up .3s ease-out}@keyframes fade-in-up{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.transcript{width:100%;min-height:180px;border-radius:var(--radius-md);border:2px solid var(--color-border);padding:var(--space-lg);font-size:1rem;line-height:1.6;resize:vertical;background:var(--color-gray-50);color:var(--color-text-primary);font-family:inherit;transition:border-color var(--transition-base),box-shadow var(--transition-base),background-color var(--transition-base)}@media(prefers-color-scheme:dark){.transcript{background:#0f172a4d}}.transcript:focus{outline:none;border-color:var(--color-primary-500);background:var(--color-surface);box-shadow:0 0 0 4px #6b7ef61a,var(--shadow-md)}.transcript::placeholder{color:var(--color-text-muted)}.clear-button{align-self:flex-end;background:var(--color-gray-100);border:1px solid var(--color-border);color:var(--color-text-primary);padding:.625rem 1.25rem;border-radius:var(--radius-sm);cursor:pointer;font-weight:600;font-size:.875rem;letter-spacing:.01em;transition:background-color var(--transition-fast),transform var(--transition-fast),border-color var(--transition-fast),box-shadow var(--transition-fast)}@media(prefers-color-scheme:dark){.clear-button{background:#33415580}}.clear-button:hover:not(:disabled){background:var(--color-primary-50);border-color:var(--color-primary-200);transform:translateY(-2px);box-shadow:var(--shadow-sm)}@media(prefers-color-scheme:dark){.clear-button:hover:not(:disabled){background:#6b7ef626;border-color:var(--color-primary-800)}}.clear-button:active:not(:disabled){transform:translateY(0)}.clear-button:disabled{opacity:.4;cursor:not-allowed}.clear-button:focus-visible{outline:2px solid var(--color-primary-400);outline-offset:2px}.spinner{margin:.5rem auto 0;width:32px;height:32px;border-radius:50%;border:3px solid var(--color-primary-200);border-top-color:var(--color-primary-600);animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.api-result{margin-top:var(--space-md);padding:var(--space-lg);border-radius:var(--radius-md);background:linear-gradient(135deg,var(--color-primary-50) 0%,var(--color-surface) 100%);border:1px solid var(--color-primary-200);box-shadow:var(--shadow-sm);animation:slide-in .4s cubic-bezier(.34,1.56,.64,1)}@media(prefers-color-scheme:dark){.api-result{background:linear-gradient(135deg,#6b7ef614,#6b7ef608);border-color:var(--color-primary-900)}}@keyframes slide-in{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.api-result-title{font-weight:700;font-size:.875rem;color:var(--color-primary-700);text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--space-xs)}@media(prefers-color-scheme:dark){.api-result-title{color:var(--color-primary-300)}}.api-result-body{color:var(--color-text-primary);white-space:pre-wrap;word-break:break-word;line-height:1.6;font-size:.9375rem}@media(max-width:640px){.app-root{padding:var(--space-md)}.card{padding:var(--space-lg);gap:var(--space-md)}.mic-button{width:84px;height:84px}.mic-emoji{font-size:32px}.transcript{min-height:140px;padding:var(--space-md)}}@media(max-width:480px){.card{padding:var(--space-md)}.mic-button{width:72px;height:72px}.mic-emoji{font-size:28px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@media(prefers-contrast:high){.card{border-width:2px}.mic-button{border:2px solid currentColor}.transcript,.clear-button{border-width:2px}}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter var(--transition-slow)}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media(prefers-reduced-motion:no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.read-the-docs{color:var(--color-text-muted)}