:root{--bg: #F8F7FC;--surface: #FFFFFF;--surface-alt: #F0EEF8;--primary: #8B7CF6;--primary-hover: #7A69E8;--primary-light: #EDE9FE;--secondary: #5BC4C0;--secondary-light: #D5F5F3;--text: #1E1B33;--text-dim: #8A8698;--success: #34D399;--success-bg: #ECFDF5;--error: #F87171;--error-bg: #FEF2F2;--border: #E5E2EF;--border-hi: #D0CBDF;--shadow: 0 1px 3px rgba(30,27,51,.06);--shadow-lg: 0 10px 25px rgba(30,27,51,.08);--radius: 12px;--radius-sm: 8px;--transition: .15s ease}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:15px;scroll-behavior:smooth}body{font-family:Inter,system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;-webkit-font-smoothing:antialiased;line-height:1.6}a{color:var(--primary);text-decoration:none}a:hover{color:var(--primary-hover)}.site-header{position:sticky;top:0;z-index:100;height:56px;background:#f8f7fceb;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}.header-inner{max-width:960px;margin:0 auto;height:100%;display:flex;align-items:center;justify-content:space-between;padding:0 1.25rem}.logo-link{display:flex;align-items:center;gap:.5rem;text-decoration:none}.logo-icon{flex-shrink:0}.wordmark{font-size:1.32rem;font-weight:700;letter-spacing:-.02em;background:linear-gradient(135deg,#8b7cf6,#5bc4c0,#8b7cf6);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:wave-gradient 4s ease infinite}@keyframes wave-gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.header-nav{display:flex;gap:1.5rem}.nav-link{font-size:.87rem;font-weight:500;color:var(--text-dim);transition:color var(--transition)}.nav-link:hover{color:var(--text)}.hero-section{display:flex;flex-direction:column;align-items:center;padding:3rem 1.25rem 2rem}.hero-text{text-align:center;margin-bottom:2rem}.hero-text h1{font-size:2.4rem;font-weight:700;letter-spacing:-.03em;line-height:1.2;background:linear-gradient(135deg,#8b7cf6,#5bc4c0,#8b7cf6 80%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:wave-gradient 4s ease infinite}.hero-sub{margin-top:.5rem;font-size:1.05rem;color:var(--text-dim);font-weight:400}.tool-card{width:100%;max-width:560px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:1.5rem}.mode-tabs{display:flex;gap:2px;background:var(--surface-alt);border-radius:var(--radius-sm);padding:3px;margin-bottom:1.5rem}.mode-tab{flex:1;background:transparent;color:var(--text-dim);border:none;padding:.55rem 1rem;border-radius:6px;cursor:pointer;font-size:.87rem;font-weight:600;transition:all var(--transition);font-family:inherit}.mode-tab:hover{color:var(--text)}.mode-tab.active{background:var(--primary);color:#fff;box-shadow:0 1px 3px #8b7cf64d}.tool-panel{display:none}.tool-panel.active{display:block}.field{margin-bottom:1rem}label{display:block;font-size:.8rem;font-weight:600;color:var(--text);margin-bottom:.35rem}.textarea-wrap{position:relative}textarea{width:100%;min-height:80px;background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.7rem .85rem 1.5rem;font-size:.93rem;font-family:inherit;outline:none;resize:vertical;transition:border-color var(--transition);line-height:1.5}textarea:focus{border-color:var(--primary)}textarea::placeholder{color:var(--text-dim)}.char-counter{position:absolute;bottom:.45rem;right:.7rem;font-size:.72rem;color:var(--text-dim);pointer-events:none}select{width:100%;background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.55rem .85rem;font-size:.87rem;font-family:inherit;outline:none;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;transition:border-color var(--transition);background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238A8698' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .75rem center}select:focus{border-color:var(--primary)}.disclosure{margin-bottom:.75rem;border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden}.disclosure summary{padding:.6rem .85rem;font-size:.85rem;font-weight:500;color:var(--text-dim);cursor:pointer;list-style:none;display:flex;align-items:center;gap:.4rem;transition:color var(--transition);-webkit-user-select:none;user-select:none}.disclosure summary::-webkit-details-marker{display:none}.disclosure summary:before{content:"";display:inline-block;width:0;height:0;border-left:5px solid var(--text-dim);border-top:4px solid transparent;border-bottom:4px solid transparent;transition:transform .2s ease;flex-shrink:0}.disclosure[open] summary:before{transform:rotate(90deg)}.disclosure summary:hover{color:var(--text)}.disclosure summary .dim{color:var(--text-dim);font-weight:400}.disclosure-body{padding:.5rem .85rem .85rem}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.6rem 1.25rem;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);font-size:.87rem;font-weight:500;cursor:pointer;transition:all var(--transition);font-family:inherit;text-decoration:none}.btn:hover{border-color:var(--border-hi);background:var(--surface-alt);color:var(--text)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-cta{width:100%;padding:.75rem 1.5rem;background:var(--primary);border-color:var(--primary);color:#fff;font-size:.95rem;font-weight:600;border-radius:var(--radius-sm);box-shadow:0 2px 8px #8b7cf640}.btn-cta:hover{background:var(--primary-hover);border-color:var(--primary-hover);color:#fff}.btn-cta:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}.btn-secondary{background:var(--secondary);border-color:var(--secondary);color:#fff}.btn-secondary:hover{background:#4db3af;border-color:#4db3af;color:#fff}.btn-danger{background:var(--error);border-color:var(--error);color:#fff}.btn-danger:hover{background:#e85d5d;border-color:#e85d5d;color:#fff}.record-area{display:flex;flex-direction:column;align-items:center;gap:.5rem;margin:.5rem 0}.record-btn{width:64px;height:64px;border-radius:50%;border:3px solid var(--border-hi);background:var(--surface);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition)}.record-btn:hover{border-color:var(--error)}.record-btn .dot{width:24px;height:24px;border-radius:50%;background:var(--error);transition:all .2s ease}.record-btn.recording .dot{width:18px;height:18px;border-radius:4px}.record-btn.recording{border-color:var(--error);animation:pulse-ring 1.5s ease infinite}@keyframes pulse-ring{0%,to{box-shadow:0 0 #f871714d}50%{box-shadow:0 0 0 12px #f8717100}}.record-label{font-size:.78rem;color:var(--text-dim)}.waveform-container{width:100%;height:48px;background:var(--surface-alt);border-radius:var(--radius-sm);overflow:hidden;margin:.5rem 0;display:none}.waveform-container.visible{display:block}#waveformCanvas,#liveWaveformCanvas{width:100%;height:100%}.encode-result{margin-top:1rem;padding:1rem;background:var(--success-bg);border:1px solid #A7F3D0;border-radius:var(--radius-sm);display:none}.encode-result.visible{display:block}.result-header{display:flex;align-items:center;gap:.5rem;font-size:.9rem;font-weight:600;color:#065f46;margin-bottom:.75rem}.encode-result audio{width:100%;height:36px;margin-bottom:.75rem;border-radius:var(--radius-sm);outline:none}.result-actions{display:flex;gap:.5rem;flex-wrap:wrap}.reveal-tabs{display:flex;gap:.5rem;margin-bottom:1rem}.reveal-tab{background:transparent;border:1px solid var(--border);color:var(--text-dim);padding:.4rem 1rem;border-radius:var(--radius-sm);cursor:pointer;font-size:.82rem;font-weight:500;transition:all var(--transition);font-family:inherit}.reveal-tab:hover{color:var(--text);border-color:var(--border-hi)}.reveal-tab.active{background:var(--primary-light);border-color:var(--primary);color:var(--primary)}.reveal-panel{display:none}.reveal-panel.active{display:block}.dropzone{border:2px dashed var(--border-hi);border-radius:var(--radius);padding:2.5rem 1.5rem;text-align:center;cursor:pointer;transition:all var(--transition);position:relative}.dropzone:hover,.dropzone.dragover{border-color:var(--primary);background:var(--primary-light)}.dz-icon{margin-bottom:.5rem}.dropzone p{color:var(--text-dim);font-size:.87rem}.dropzone p strong{color:var(--primary)}.dz-link{color:var(--primary);font-weight:500}.dropzone input[type=file]{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;cursor:pointer}.decode-result{margin-top:1rem;padding:1rem;background:var(--secondary-light);border:1px solid #99E6E1;border-radius:var(--radius-sm);display:none}.decode-result.visible{display:block}.decode-label{font-size:.72rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.3rem;font-weight:600}.decode-message{font-size:1.05rem;word-break:break-all;color:#0d9488;font-weight:600}.decode-meta{font-size:.75rem;color:var(--text-dim);margin-top:.3rem}.live-controls{display:flex;align-items:center;gap:.75rem;margin-bottom:.75rem}.live-controls .btn-cta{width:auto;flex-shrink:0}.live-indicator{font-size:.82rem;color:var(--text-dim)}.live-messages{max-height:260px;overflow-y:auto;margin-top:.75rem}.live-msg{padding:.6rem .8rem;background:var(--secondary-light);border:1px solid #99E6E1;border-radius:var(--radius-sm);margin-bottom:.4rem;font-size:.87rem;color:#0d9488;font-weight:500;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.live-msg .ts{font-size:.72rem;color:var(--text-dim);margin-left:.5rem;font-weight:400}.status-toast{font-size:.82rem;padding:.55rem .85rem;border-radius:var(--radius-sm);margin-top:.75rem;display:none}.status-toast.visible{display:block}.status-toast.error{background:var(--error-bg);color:var(--error);border:1px solid #FECACA}.status-toast.success{background:var(--success-bg);color:#065f46;border:1px solid #A7F3D0}.status-toast.info{background:var(--primary-light);color:var(--primary);border:1px solid #C4B5FD}.spinner{width:14px;height:14px;border:2px solid transparent;border-top-color:currentColor;border-radius:50%;animation:spin .6s linear infinite;display:inline-block;vertical-align:middle}@keyframes spin{to{transform:rotate(360deg)}}.ad-slot{display:flex;justify-content:center;padding:1.5rem 1.25rem}.ad-slot-horizontal .ad-placeholder{width:728px;max-width:100%;height:90px;background:var(--surface-alt);border:1px dashed var(--border);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;color:var(--text-dim);font-size:.75rem;text-transform:uppercase;letter-spacing:.1em}.ad-slot-square .ad-placeholder{width:300px;height:250px;background:var(--surface-alt);border:1px dashed var(--border);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;color:var(--text-dim);font-size:.75rem;text-transform:uppercase;letter-spacing:.1em}.content-section{padding:3.5rem 1.25rem}.section-alt{background:var(--surface-alt)}.section-inner{max-width:960px;margin:0 auto}.section-title{text-align:center;font-size:1.6rem;font-weight:700;letter-spacing:-.02em;margin-bottom:2rem;color:var(--text)}.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}.step-card{text-align:center;padding:1.5rem 1rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}.step-icon{margin-bottom:1rem}.step-card h3{font-size:1rem;font-weight:600;margin-bottom:.5rem;color:var(--text)}.step-card p{font-size:.87rem;color:var(--text-dim);line-height:1.5}.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}.feature-card{padding:1.25rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}.feature-icon-wrap{width:44px;height:44px;background:var(--primary-light);border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:.75rem}.feature-card h3{font-size:.95rem;font-weight:600;margin-bottom:.35rem;color:var(--text)}.feature-card p{font-size:.82rem;color:var(--text-dim);line-height:1.5}.use-cases-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem}.use-case{padding:1.25rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}.use-case h3{font-size:.95rem;font-weight:600;margin-bottom:.35rem;color:var(--text)}.use-case p{font-size:.85rem;color:var(--text-dim);line-height:1.5}.faq-list{max-width:700px;margin:0 auto}.faq-item{border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:.5rem;background:var(--surface);overflow:hidden}.faq-item summary{padding:.85rem 1rem;font-size:.93rem;font-weight:600;color:var(--text);cursor:pointer;list-style:none;display:flex;align-items:center;gap:.5rem;transition:background var(--transition);-webkit-user-select:none;user-select:none}.faq-item summary::-webkit-details-marker{display:none}.faq-item summary:before{content:"";display:inline-block;width:0;height:0;border-left:5px solid var(--primary);border-top:4px solid transparent;border-bottom:4px solid transparent;transition:transform .2s ease;flex-shrink:0}.faq-item[open] summary:before{transform:rotate(90deg)}.faq-item summary:hover{background:var(--surface-alt)}.faq-item p{padding:0 1rem 1rem 1.5rem;font-size:.87rem;color:var(--text-dim);line-height:1.6}.faq-item a{color:var(--primary)}.site-footer{background:var(--surface);border-top:1px solid var(--border);padding:2rem 1.25rem}.footer-inner{max-width:960px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem}.footer-brand{display:flex;align-items:center;gap:.4rem}.footer-brand .wordmark{font-size:.95rem}.footer-links{display:flex;gap:1.25rem}.footer-links a{font-size:.82rem;color:var(--text-dim);transition:color var(--transition)}.footer-links a:hover{color:var(--text)}.footer-meta{width:100%;text-align:center;margin-top:.5rem}.footer-meta p{font-size:.75rem;color:var(--text-dim)}.footer-meta a{color:var(--primary)}@media(max-width:768px){.steps-grid{grid-template-columns:1fr}.features-grid{grid-template-columns:repeat(2,1fr)}.use-cases-grid{grid-template-columns:1fr}}@media(max-width:560px){.hero-text h1{font-size:1.8rem}.hero-sub{font-size:.9rem}.tool-card{padding:1rem;border-radius:var(--radius-sm)}.features-grid{grid-template-columns:1fr}.footer-inner{flex-direction:column;align-items:center;text-align:center}.ad-slot-horizontal .ad-placeholder{width:320px;height:100px}.record-btn{width:56px;height:56px}.record-btn .dot{width:20px;height:20px}.section-title{font-size:1.35rem}.content-section{padding:2.5rem 1rem}}