@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap";*{box-sizing:border-box;margin:0;padding:0}:root{font-family:Inter,system-ui,-apple-system,sans-serif;line-height:1.5;font-weight:400;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}body{margin:0;min-height:100vh}.min-h-screen{min-height:100vh}.bg-gradient-to-br{background:linear-gradient(to bottom right,#a855f7,#8b5cf6,#6366f1)}.flex{display:flex}.items-center{align-items:center}.justify-center{justify-content:center}.p-4{padding:1rem}.w-full{width:100%}.max-w-md{max-width:28rem}.backdrop-blur-lg{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.rounded-3xl{border-radius:1.5rem}.p-8{padding:2rem}.shadow-2xl{box-shadow:0 25px 50px -12px #00000040}.border{border-width:1px}.border-white\/20{border-color:#fff3}.text-center{text-align:center}.mb-8{margin-bottom:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.font-bold{font-weight:700}.text-white{color:#fff}.drop-shadow-lg{filter:drop-shadow(0 10px 8px rgb(0 0 0 / .04)) drop-shadow(0 4px 3px rgb(0 0 0 / .1))}.mb-2{margin-bottom:.5rem}.text-sm{font-size:.875rem;line-height:1.25rem}.font-medium{font-weight:500}.drop-shadow{filter:drop-shadow(0 1px 2px rgb(0 0 0 / .1)) drop-shadow(0 1px 1px rgb(0 0 0 / .06))}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.relative{position:relative}.w-32{width:8rem}.h-32{height:8rem}.mx-auto{margin-left:auto;margin-right:auto}.rounded-full{border-radius:9999px}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-300{transition-duration:.3s}.bg-red-500\/20{background-color:#ef444433}.border-4{border-width:4px}.border-red-400{border-color:#f87171}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.bg-white\/10{background-color:#ffffff1a}.border-white\/30{border-color:#ffffff4d}.hover\:border-white\/50:hover{border-color:#ffffff80}.w-12{width:3rem}.h-12{height:3rem}.text-red-400{color:#f87171}.absolute{position:absolute}.inset-0{top:0;right:0;bottom:0;left:0}.border-red-400\/30{border-color:#f871714d}.animate-ping{animation:ping 1s cubic-bezier(0,0,.2,1) infinite}.text-lg{font-size:1.125rem;line-height:1.75rem}.font-mono{font-family:ui-monospace,SFMono-Regular,SF Mono,Monaco,Consolas,Liberation Mono,Courier New,monospace}.px-8{padding-left:2rem;padding-right:2rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.font-semibold{font-weight:600}.duration-200{transition-duration:.2s}.bg-red-500{background-color:#ef4444}.hover\:bg-red-600:hover{background-color:#dc2626}.bg-white{background-color:#fff}.text-purple-700{color:#7e22ce}.hover\:bg-gray-100:hover{background-color:#f3f4f6}.w-4{width:1rem}.h-4{height:1rem}.inline{display:inline}.mr-2{margin-right:.5rem}.bg-white\/5{background-color:#ffffff0d}.rounded-2xl{border-radius:1rem}.p-6{padding:1.5rem}.border-white\/10{border-color:#ffffff1a}.justify-between{justify-content:space-between}.hover\:text-white:hover{color:#fff}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.space-x-4>:not([hidden])~:not([hidden]){margin-left:1rem}.hover\:bg-white\/20:hover{background-color:#fff3}.w-5{width:1.25rem}.h-5{height:1.25rem}.ml-1{margin-left:.25rem}.flex-1{flex:1 1 0%}.mb-1{margin-bottom:.25rem}.h-2{height:.5rem}.space-x-3>:not([hidden])~:not([hidden]){margin-left:.75rem}.bg-purple-600{background-color:#9333ea}.hover\:bg-purple-700:hover{background-color:#7e22ce}.disabled\:opacity-50:disabled{opacity:.5}.px-4{padding-left:1rem;padding-right:1rem}.rounded-xl{border-radius:.75rem}.bg-indigo-600{background-color:#4f46e5}.hover\:bg-indigo-700:hover{background-color:#4338ca}.mt-4{margin-top:1rem}.p-3{padding:.75rem}.bg-green-500\/10{background-color:#22c55e1a}.border-green-400\/20{border-color:#4ade8033}.text-green-400{color:#4ade80}.text-green-300{color:#86efac}.text-xs{font-size:.75rem;line-height:1rem}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes ping{0%{transform:scale(1);opacity:1}75%,to{transform:scale(2);opacity:0}}@keyframes bounce{0%,to{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:translateY(0);animation-timing-function:cubic-bezier(0,0,.2,1)}}.animate-bounce{animation:bounce .6s infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.animate-spin{animation:spin 1s linear infinite}.border-t-transparent{border-top-color:transparent}.border-2{border-width:2px}button{cursor:pointer;border:none;outline:none;transition:all .2s ease;display:flex;align-items:center;justify-content:center;font-family:Inter,system-ui,-apple-system,sans-serif}button:disabled{cursor:not-allowed}.recording-button{background:#fffffff2;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 8px 32px #0000001a;border:1px solid rgba(255,255,255,.2);padding:16px 32px;font-size:16px;font-weight:600;border-radius:50px;min-height:56px}.recording-button:hover:not(:disabled){background:#fff;transform:translateY(-1px);box-shadow:0 12px 40px #00000026}.recording-button-active{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;box-shadow:0 8px 32px #ef44444d;padding:16px 32px;font-size:16px;font-weight:600;border-radius:50px;min-height:56px}.recording-button-active:hover{background:linear-gradient(135deg,#dc2626,#b91c1c);transform:translateY(-1px);box-shadow:0 12px 40px #ef444466}.action-button{background:linear-gradient(135deg,#8b5cf6,#7c3aed);box-shadow:0 6px 24px #8b5cf640;border:1px solid rgba(255,255,255,.1);padding:16px 24px;font-size:16px;font-weight:600;border-radius:12px;min-height:52px;gap:8px}.action-button:hover:not(:disabled){background:linear-gradient(135deg,#7c3aed,#6d28d9);transform:translateY(-1px);box-shadow:0 8px 32px #8b5cf659}.play-button{background:#ffffff1a;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.2);box-shadow:0 4px 16px #0000001a;width:48px;height:48px}.play-button:hover{background:#fff3;transform:scale(1.05);box-shadow:0 6px 24px #00000026}.delete-button{color:#ffffffb3;transition:all .2s ease;background:transparent;padding:8px}.delete-button:hover{color:#fff;transform:scale(1.1);background:#ffffff1a;border-radius:8px}.progress-bar{width:100%;background:#ffffff1a;border-radius:9999px;height:8px}.progress-fill{background:#fff;border-radius:9999px;height:8px;transition:all .2s ease}.time-display{color:#ffffffb3;font-size:14px;font-weight:500}.redo-button{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:all .2s ease}.redo-button:hover{background:#fff3;transform:translateY(-1px);box-shadow:0 4px 16px #0000001a}.space-y-6>:not([hidden])~:not([hidden]){margin-top:1rem}.button-container-center{display:flex;justify-content:center;width:100%}.recording-button,.recording-button-active{display:flex;align-items:center;justify-content:center;margin:0 auto}