*{margin:0;padding:0;box-sizing:border-box}body{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.5;color:#1f2937;background-color:#f9fafb}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.space-x-2>*+*{margin-left:.5rem}.space-x-3>*+*{margin-left:.75rem}.space-y-4>*+*{margin-top:1rem}.space-y-6>*+*{margin-top:1.5rem}.min-h-screen{min-height:100vh}.w-full{width:100%}.h-full{height:100%}.max-w-sm{max-width:24rem}.max-w-md{max-width:28rem}.max-w-lg{max-width:32rem}.mx-auto{margin-left:auto;margin-right:auto}.p-4{padding:1rem}.p-6{padding:1.5rem}.px-4{padding-left:1rem;padding-right:1rem}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.text-center{text-align:center}.text-sm{font-size:.875rem}.text-base{font-size:1rem}.text-xl{font-size:1.25rem}.text-2xl{font-size:1.5rem}.font-bold{font-weight:700}.font-mono{font-family:ui-monospace,SFMono-Regular,monospace}.bg-white{background-color:#fff}.bg-blue-50{background-color:#eff6ff}.bg-indigo-100{background-color:#e0e7ff}.text-gray-500{color:#6b7280}.text-gray-600{color:#4b5563}.text-gray-700{color:#374151}.text-gray-800{color:#1f2937}.rounded-2xl{border-radius:1rem}.rounded-full{border-radius:9999px}.shadow-lg{box-shadow:0 10px 15px -3px #0000001a}.shadow-xl{box-shadow:0 20px 25px -5px #0000001a}.border{border-width:1px}.border-gray-100{border-color:#f3f4f6}.relative{position:relative}.absolute{position:absolute}.inset-0{inset:0}@media (min-width: 640px){.sm\:p-6{padding:1.5rem}.sm\:mb-8{margin-bottom:2rem}.sm\:text-base{font-size:1rem}.sm\:text-2xl{font-size:1.5rem}.sm\:max-w-md{max-width:28rem}.sm\:space-x-3>*+*{margin-left:.75rem}}@media (min-width: 1024px){.lg\:p-8{padding:2rem}}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.from-blue-50{--tw-gradient-from: #eff6ff;--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(239, 246, 255, 0))}.via-white{--tw-gradient-to: rgba(255, 255, 255, 0);--tw-gradient-stops: var(--tw-gradient-from), #ffffff, var(--tw-gradient-to, rgba(255, 255, 255, 0))}.to-indigo-100{--tw-gradient-to: #e0e7ff}.touch-button{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.w-10{width:2.5rem}.h-10{height:2.5rem}.w-12{width:3rem}.h-12{height:3rem}.w-16{width:4rem}.h-16{height:4rem}.w-20{width:5rem}.h-20{height:5rem}@media (min-width: 640px){.sm\:w-12{width:3rem}.sm\:h-12{height:3rem}.sm\:w-20{width:5rem}.sm\:h-20{height:5rem}.sm\:w-5{width:1.25rem}.sm\:h-5{height:1.25rem}.sm\:w-8{width:2rem}.sm\:h-8{height:2rem}}.w-4{width:1rem}.h-4{height:1rem}.w-5{width:1.25rem}.h-5{height:1.25rem}.w-6{width:1.5rem}.h-6{height:1.5rem}.w-8{width:2rem}.h-8{height:2rem}.bg-red-500{background-color:#ef4444}.bg-red-600{background-color:#dc2626}.bg-blue-500{background-color:#3b82f6}.bg-blue-600{background-color:#2563eb}.text-white{color:#fff}.text-red-500{color:#ef4444}.text-red-600{color:#dc2626}.hover\:bg-red-600:hover{background-color:#dc2626}.hover\:bg-blue-600:hover{background-color:#2563eb}.hover\:text-red-600:hover{color:#dc2626}.hover\:shadow-lg:hover{box-shadow:0 10px 15px -3px #0000001a}.shadow-red-200{box-shadow:0 10px 15px -3px #fecaca80}.shadow-blue-200{box-shadow:0 10px 15px -3px #bfdbfe80}.shadow-md{box-shadow:0 4px 6px -1px #0000001a}.transition-shadow{transition:box-shadow .15s ease-in-out}.transition-colors{transition:color .15s ease-in-out,background-color .15s ease-in-out}.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}.z-50{z-index:50}.clickable{position:relative;z-index:10;pointer-events:auto}.recording-button{position:relative;z-index:20;pointer-events:auto}.recording-button:before,.recording-button:after{pointer-events:none}button{position:relative;z-index:10}.animate-ping{pointer-events:none}