@import"https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700&display=swap";:root{--color-bg: #fdfaf1;--color-paper: #ffffff;--color-text: #4a3f35;--color-primary: #8fb9a8;--color-secondary: #fefad4;--color-accent: #ff8c94;--color-sky: #a1d9eb;--color-border: #e0d7c6;--font-main: "Zen Maru Gothic", "Inter", system-ui, -apple-system, sans-serif;--shadow-warm: 0 4px 15px rgba(74, 63, 53, .08);--radius-lg: 24px;--radius-md: 16px;--transition-smooth: .3s cubic-bezier(.4, 0, .2, 1)}*{margin:0;padding:0;box-sizing:border-box}body{background-color:var(--color-bg);color:var(--color-text);font-family:var(--font-main);line-height:1.6;-webkit-font-smoothing:antialiased;min-height:100vh;background-image:radial-gradient(circle at 10% 20%,rgba(143,185,168,.05) 0%,transparent 40%),radial-gradient(circle at 90% 80%,rgba(161,217,235,.05) 0%,transparent 40%),url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.02'/%3E%3C/svg%3E")}#root{display:flex;flex-direction:column;min-height:100vh}h1,h2,h3{font-weight:700;color:#3d342d}button{cursor:pointer;font-family:inherit;border:none;background:none;transition:var(--transition-smooth)}.container{max-width:800px;margin:0 auto;padding:2rem 1rem;width:100%}.card{background:var(--color-paper);border-radius:var(--radius-lg);padding:2rem;box-shadow:var(--shadow-warm);border:1px solid var(--color-border)}.mode-card{border:2px solid transparent!important;transition:all .3s cubic-bezier(.4,0,.2,1)!important}.mode-card:hover{transform:translateY(-5px);border-color:var(--color-primary)!important;box-shadow:0 10px 20px #8fb9a826!important;background-color:#fff!important}.mode-card h3{transition:color .3s ease}.mode-card:hover h3{color:var(--color-secondary)!important}.fade-in{animation:fadeIn .8s var(--transition-smooth)}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.input-container{position:relative;width:100%}.mic-button{position:absolute;right:12px;bottom:12px;width:40px;height:40px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #0000001a;color:var(--color-primary);border:1px solid var(--color-border);z-index:10;transition:all .2s ease}.mic-button:hover{transform:scale(1.1);background:var(--color-secondary)}.mic-button.recording{background:var(--color-accent);color:#fff;animation:pulse-red 1.5s infinite}@keyframes pulse-red{0%{transform:scale(.95);box-shadow:0 0 #ff8c94b3}70%{transform:scale(1);box-shadow:0 0 0 10px #ff8c9400}to{transform:scale(.95);box-shadow:0 0 #ff8c9400}}