:root{--color-bg-primary: #0a0a12;--color-bg-secondary: #0e0e1a;--color-bg-tertiary: #151520;--color-bg-card: rgba(20, 18, 35, .5);--color-bg-glass: rgba(30, 25, 50, .4);--color-accent-primary: #a78bfa;--color-accent-secondary: #c4b5fd;--color-accent-glow: rgba(167, 139, 250, .25);--color-accent-soft: rgba(167, 139, 250, .08);--color-text-primary: #f1f5f9;--color-text-secondary: #a1a1aa;--color-text-muted: #71717a;--color-border: rgba(167, 139, 250, .12);--color-border-hover: rgba(167, 139, 250, .25);--color-border-light: rgba(255, 255, 255, .06);--color-success: #4ade80;--color-error: #f87171;--glass-blur: 24px;--glass-blur-heavy: 40px;--glass-bg: rgba(25, 20, 40, .5);--glass-border: rgba(255, 255, 255, .08);--glass-highlight: linear-gradient(135deg, rgba(255, 255, 255, .1) 0%, transparent 50%);--glass-inner-shadow: inset 0 1px 1px rgba(255, 255, 255, .05);--gradient-primary: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 50%, #7c3aed 100%);--gradient-bg-base: linear-gradient(135deg, #0a0a14 0%, #12101f 25%, #0d0b18 50%, #100e1c 75%, #0a0a12 100%);--gradient-bg-overlay: radial-gradient(ellipse 100% 80% at 50% -30%, rgba(100, 60, 180, .2) 0%, transparent 60%);--gradient-bg-bottom: radial-gradient(ellipse 80% 50% at 50% 120%, rgba(80, 40, 140, .12) 0%, transparent 50%);--gradient-glow: radial-gradient(circle at 50% 0%, rgba(167, 139, 250, .18) 0%, transparent 45%);--gradient-shimmer: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .04) 50%, transparent 100%);--font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 1.875rem;--font-size-4xl: 2.25rem;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--space-16: 4rem;--radius-sm: .5rem;--radius-md: .75rem;--radius-lg: 1rem;--radius-xl: 1.25rem;--radius-2xl: 1.5rem;--radius-3xl: 2rem;--radius-full: 9999px;--shadow-sm: 0 2px 8px rgba(0, 0, 0, .15);--shadow-md: 0 4px 16px rgba(0, 0, 0, .2);--shadow-lg: 0 8px 32px rgba(0, 0, 0, .25);--shadow-glow: 0 0 40px rgba(167, 139, 250, .15);--shadow-glow-sm: 0 0 20px rgba(167, 139, 250, .1);--transition-fast: .18s cubic-bezier(.4, 0, .2, 1);--transition-base: .28s cubic-bezier(.4, 0, .2, 1);--transition-slow: .4s cubic-bezier(.4, 0, .2, 1);--transition-spring: .5s cubic-bezier(.34, 1.56, .64, 1)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-family);font-size:var(--font-size-base);line-height:1.6;color:var(--color-text-primary);background:var(--gradient-bg-base);min-height:100vh;overflow-x:hidden;cursor:default;user-select:none;-webkit-user-select:none}body:before{content:"";position:fixed;inset:0;background:var(--gradient-glow),var(--gradient-bg-overlay),var(--gradient-bg-bottom);pointer-events:none;z-index:-1}#root{min-height:100vh;display:flex;flex-direction:column}h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.3;letter-spacing:-.02em}h1{font-size:var(--font-size-3xl);font-weight:700;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}p{color:var(--color-text-secondary)}a,button{cursor:pointer}@keyframes pulse-soft{0%,to{opacity:1}50%{opacity:.7}}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes glow-pulse{0%,to{opacity:.5}50%{opacity:1}}@keyframes progress-flow{0%{background-position:0% 50%}to{background-position:200% 50%}}@keyframes fade-in-up{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes scale-in{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.glass{background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-border);border-radius:var(--radius-2xl);box-shadow:var(--glass-inner-shadow),var(--shadow-md);position:relative;overflow:hidden}.glass:before{content:"";position:absolute;inset:0;background:var(--glass-highlight);pointer-events:none;border-radius:inherit}.glow{box-shadow:var(--shadow-glow)}.fade-in{animation:fade-in-up .4s var(--transition-base) forwards}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--color-accent-primary);border-radius:var(--radius-full);opacity:.5}::-webkit-scrollbar-thumb:hover{background:var(--color-accent-secondary)}.app{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:var(--space-8) var(--space-4);position:relative}.app:before{content:"";position:fixed;top:-30%;left:50%;transform:translate(-50%);width:120%;height:60%;background:var(--gradient-glow);pointer-events:none;filter:blur(60px);opacity:.6}.container{width:100%;max-width:560px;display:flex;flex-direction:column;gap:var(--space-5);position:relative;z-index:1}.header{text-align:center;margin-bottom:var(--space-2)}.header__title{font-size:var(--font-size-3xl);margin-bottom:var(--space-2);display:flex;align-items:center;justify-content:center;gap:var(--space-2)}.header__icon{font-size:var(--font-size-2xl);animation:float 4s ease-in-out infinite}.header__subtitle{font-size:var(--font-size-sm);color:var(--color-text-muted);font-weight:400}.upload-zone{padding:var(--space-10) var(--space-6);background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-border);border-radius:var(--radius-2xl);text-align:center;cursor:pointer;transition:all var(--transition-base);position:relative;overflow:hidden}.upload-zone:before{content:"";position:absolute;inset:0;background:var(--glass-highlight);pointer-events:none;border-radius:inherit}.upload-zone:after{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:var(--gradient-shimmer);transition:left .6s ease;pointer-events:none}.upload-zone:hover:not(.upload-zone--disabled){border-color:var(--color-border-hover);background:#1e19328c;transform:translateY(-2px);box-shadow:var(--shadow-glow-sm)}.upload-zone:hover:not(.upload-zone--disabled):after{left:100%}.upload-zone--active{border-color:var(--color-accent-primary);background:#281e3c99;box-shadow:var(--shadow-glow)}.upload-zone--disabled{opacity:.5;cursor:not-allowed}.upload-zone__icon{font-size:2.5rem;margin-bottom:var(--space-3);display:block;filter:drop-shadow(0 2px 8px rgba(167,139,250,.3))}.upload-zone__title{font-size:var(--font-size-base);font-weight:600;color:var(--color-text-primary);margin-bottom:var(--space-1)}.upload-zone__subtitle{font-size:var(--font-size-xs);color:var(--color-text-muted)}.upload-zone__file-info{margin-top:var(--space-4);padding:var(--space-2) var(--space-4);background:var(--color-accent-soft);border-radius:var(--radius-full);display:inline-flex;align-items:center;gap:var(--space-2);border:1px solid var(--color-border)}.upload-zone__file-name{font-weight:500;font-size:var(--font-size-sm);color:var(--color-accent-secondary)}.upload-zone__file-size{color:var(--color-text-muted);font-size:var(--font-size-xs)}.controls{padding:var(--space-5);animation:scale-in .4s ease forwards}.controls__group{margin-bottom:var(--space-5)}.controls__group:last-child{margin-bottom:0}.controls__label{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-2)}.controls__label-text{font-weight:500;font-size:var(--font-size-sm);color:var(--color-text-primary)}.controls__label-value{font-weight:600;color:var(--color-accent-secondary);font-size:var(--font-size-base);font-variant-numeric:tabular-nums}.controls__presets{margin-bottom:var(--space-4)}.controls__presets-label{font-size:var(--font-size-xs);font-weight:600;color:var(--color-text-muted);margin-bottom:var(--space-3);text-transform:uppercase;letter-spacing:.08em}.controls__presets-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-2)}.controls__preset-btn{padding:var(--space-2) var(--space-3);font-family:var(--font-family);font-size:var(--font-size-xs);font-weight:500;color:var(--color-text-secondary);background:#ffffff08;border:1px solid var(--color-border-light);border-radius:var(--radius-full);cursor:pointer;transition:all var(--transition-fast);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.controls__preset-btn:hover:not(:disabled){background:var(--color-accent-soft);border-color:var(--color-border-hover);color:var(--color-text-primary);transform:scale(1.02)}.controls__preset-btn:active:not(:disabled){transform:scale(.98)}.controls__preset-btn:disabled{opacity:.4;cursor:not-allowed}.controls__preset-btn--active{background:var(--gradient-primary);border-color:transparent;color:#fff;font-weight:600;box-shadow:0 2px 8px #a78bfa4d,inset 0 1px #ffffff26}.controls__preset-btn--active:hover:not(:disabled){background:var(--gradient-primary);border-color:transparent;color:#fff;transform:scale(1.02);box-shadow:0 4px 12px #a78bfa66,inset 0 1px #fff3}.controls__divider{height:1px;background:linear-gradient(90deg,transparent,var(--color-border),transparent);margin:var(--space-4) 0}.controls__section-label{font-size:var(--font-size-xs);font-weight:600;color:var(--color-text-muted);margin-bottom:var(--space-4);text-transform:uppercase;letter-spacing:.08em}.slider{-webkit-appearance:none;appearance:none;width:100%;height:6px;background:#ffffff0f;border-radius:var(--radius-full);outline:none;cursor:pointer;transition:all var(--transition-base);position:relative}.slider:hover{background:#ffffff1a}.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;background:var(--gradient-primary);border-radius:50%;cursor:pointer;box-shadow:0 2px 8px #0000004d,0 0 0 3px #a78bfa26;transition:all var(--transition-spring);border:2px solid rgba(255,255,255,.2)}.slider::-webkit-slider-thumb:hover{transform:scale(1.15);box-shadow:0 4px 12px #0006,0 0 0 5px #a78bfa33,var(--shadow-glow-sm)}.slider::-moz-range-thumb{width:20px;height:20px;background:var(--gradient-primary);border-radius:50%;cursor:pointer;border:2px solid rgba(255,255,255,.2);box-shadow:0 2px 8px #0000004d}.slider:disabled{opacity:.4;cursor:not-allowed}.process-btn{width:100%;padding:var(--space-4) var(--space-6);font-family:var(--font-family);font-size:var(--font-size-base);font-weight:600;color:#fff;background:var(--gradient-primary);border:none;border-radius:var(--radius-xl);cursor:pointer;transition:all var(--transition-base);box-shadow:var(--shadow-md),inset 0 1px #ffffff26;position:relative;overflow:hidden;letter-spacing:.01em}.process-btn:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.1) 0%,transparent 50%);pointer-events:none}.process-btn:after{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);transition:left .5s ease;pointer-events:none}.process-btn:hover:not(:disabled):after{left:100%}.process-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-lg),var(--shadow-glow),inset 0 1px #fff3}.process-btn:active:not(:disabled){transform:translateY(0) scale(.99)}.process-btn:disabled{opacity:.5;cursor:not-allowed}.process-btn--loading{pointer-events:none}.progress{padding:var(--space-5);animation:scale-in .4s ease forwards}.progress__bar-container{height:8px;background:#ffffff0f;border-radius:var(--radius-full);overflow:hidden;margin-bottom:var(--space-3);box-shadow:inset 0 1px 2px #0003}.progress__bar{height:100%;background:var(--gradient-primary);background-size:200% 100%;border-radius:var(--radius-full);transition:width var(--transition-base);animation:progress-flow 2s linear infinite;box-shadow:0 0 10px #a78bfa66}.progress__info{display:flex;justify-content:space-between;align-items:center}.progress__status{font-size:var(--font-size-xs);color:var(--color-text-muted)}.progress__percentage{font-weight:600;color:var(--color-accent-secondary);font-size:var(--font-size-sm);font-variant-numeric:tabular-nums}.output{padding:var(--space-5);animation:scale-in .4s ease forwards}.output__success{text-align:center;margin-bottom:var(--space-5)}.output__success-icon{font-size:2.5rem;margin-bottom:var(--space-2);display:block;filter:drop-shadow(0 2px 8px rgba(74,222,128,.3))}.output__success-text{font-size:var(--font-size-base);font-weight:600;color:var(--color-success)}.output__filename{text-align:center;margin-bottom:var(--space-4);padding:var(--space-2) var(--space-4);background:var(--color-accent-soft);border-radius:var(--radius-full);color:var(--color-accent-secondary);font-weight:500;font-size:var(--font-size-sm);word-break:break-all;border:1px solid var(--color-border)}.output__player{width:100%;margin-bottom:var(--space-5)}.audio-player{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4);background:#140f2399;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-xl);box-shadow:inset 0 1px #ffffff0d,0 4px 16px #0003}.audio-player__play-btn{flex-shrink:0;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--gradient-primary);border:none;border-radius:50%;color:#fff;cursor:pointer;transition:all var(--transition-fast);box-shadow:0 2px 8px #a78bfa4d,inset 0 1px #fff3}.audio-player__play-btn:hover{transform:scale(1.08);box-shadow:0 4px 16px #a78bfa66,inset 0 1px #ffffff40}.audio-player__play-btn:active{transform:scale(.98)}.audio-player__play-btn svg{width:20px;height:20px}.audio-player__time{font-size:var(--font-size-xs);font-weight:500;color:var(--color-text-muted);min-width:40px;font-variant-numeric:tabular-nums}.audio-player__time--duration{text-align:right}.audio-player__progress{flex:1;height:6px;background:#ffffff1a;border-radius:var(--radius-full);cursor:pointer;position:relative;overflow:visible}.audio-player__progress-fill{height:100%;background:var(--gradient-primary);border-radius:var(--radius-full);transition:width .1s linear;box-shadow:0 0 8px #a78bfa66}.audio-player__progress-thumb{position:absolute;top:50%;transform:translate(-50%,-50%) scale(0);width:14px;height:14px;background:#fff;border-radius:50%;box-shadow:0 2px 6px #0000004d;transition:transform var(--transition-fast);pointer-events:none}.audio-player__progress:hover .audio-player__progress-thumb{transform:translate(-50%,-50%) scale(1)}.audio-player__volume-btn{flex-shrink:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:var(--color-text-muted);cursor:pointer;transition:all var(--transition-fast);border-radius:var(--radius-md)}.audio-player__volume-btn:hover{color:var(--color-text-primary);background:#ffffff0d}.audio-player__volume-slider{width:60px;height:4px;-webkit-appearance:none;appearance:none;background:#ffffff1a;border-radius:var(--radius-full);cursor:pointer}.audio-player__volume-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:12px;height:12px;background:var(--color-accent-primary);border-radius:50%;cursor:pointer;box-shadow:0 1px 4px #0000004d;transition:transform var(--transition-fast)}.audio-player__volume-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.audio-player__volume-slider::-moz-range-thumb{width:12px;height:12px;background:var(--color-accent-primary);border:none;border-radius:50%;cursor:pointer}@media(max-width:480px){.audio-player{flex-wrap:wrap;gap:var(--space-2);padding:var(--space-3)}.audio-player__progress{order:4;flex-basis:100%;margin-top:var(--space-2)}.audio-player__volume-btn,.audio-player__volume-slider{display:none}}.output__actions{display:flex;gap:var(--space-3)}.output__btn{flex:1;padding:var(--space-3) var(--space-4);font-family:var(--font-family);font-size:var(--font-size-sm);font-weight:600;border:none;border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-fast);text-decoration:none;text-align:center;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2)}.output__btn--download{background:var(--gradient-primary);color:#fff;box-shadow:var(--shadow-sm),inset 0 1px #ffffff1a}.output__btn--download:hover{transform:translateY(-1px) scale(1.02);box-shadow:var(--shadow-md),var(--shadow-glow-sm)}.output__btn--reset{background:#ffffff0a;color:var(--color-text-secondary);border:1px solid var(--color-border-light);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.output__btn--reset:hover{border-color:var(--color-border-hover);background:var(--color-accent-soft);color:var(--color-text-primary)}.loading-overlay{position:fixed;inset:0;background:var(--color-bg-primary);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:100}.loading-overlay:before{content:"";position:absolute;top:30%;left:50%;transform:translate(-50%);width:300px;height:300px;background:radial-gradient(circle,rgba(167,139,250,.15) 0%,transparent 70%);filter:blur(40px);animation:glow-pulse 2s ease-in-out infinite}.loading-overlay__spinner{width:48px;height:48px;border:3px solid rgba(255,255,255,.06);border-top-color:var(--color-accent-primary);border-radius:50%;animation:spin .8s linear infinite;margin-bottom:var(--space-4);position:relative;z-index:1}.loading-overlay__text{font-size:var(--font-size-sm);color:var(--color-text-muted);position:relative;z-index:1}.error{padding:var(--space-3) var(--space-4);background:#f8717114;border:1px solid rgba(248,113,113,.2);border-radius:var(--radius-lg);color:var(--color-error);text-align:center;font-size:var(--font-size-sm);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.how-to-use{width:100%;max-width:560px;margin:var(--space-12) auto var(--space-8);padding:0 var(--space-4)}.how-to-use__title{font-size:var(--font-size-lg);font-weight:600;color:var(--color-text-primary);text-align:center;margin-bottom:var(--space-6);background:none;-webkit-text-fill-color:unset}.how-to-use__steps{display:flex;flex-direction:column;gap:var(--space-4);list-style-type:none;padding:0;margin:0}.how-to-use__step{display:flex;align-items:flex-start;gap:var(--space-4);padding:var(--space-4);background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-border);border-radius:var(--radius-xl);transition:all var(--transition-fast)}.how-to-use__step:hover{background:#1e193280;border-color:var(--color-border-hover);transform:translate(4px)}.how-to-use__number{flex-shrink:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:var(--gradient-primary);border-radius:var(--radius-full);font-size:var(--font-size-sm);font-weight:700;color:#fff;box-shadow:0 2px 8px #a78bfa4d}.how-to-use__content{flex:1}.how-to-use__step-title{font-size:var(--font-size-sm);font-weight:600;color:var(--color-text-primary);margin-bottom:var(--space-1);background:none;-webkit-text-fill-color:unset}.how-to-use__step-desc{font-size:var(--font-size-xs);color:var(--color-text-muted);line-height:1.5}.footer{width:100%;text-align:center;padding:var(--space-8) var(--space-4);margin-top:auto;border-top:1px solid var(--color-border-light);background:#0a0a1280;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.footer__text{font-size:var(--font-size-sm);color:var(--color-text-secondary);margin-bottom:var(--space-1)}.footer__heart{color:#f87171;display:inline-block;animation:heartbeat 1.5s ease-in-out infinite}@keyframes heartbeat{0%,to{transform:scale(1)}25%{transform:scale(1.15)}50%{transform:scale(1)}75%{transform:scale(1.1)}}.footer__sub{font-size:var(--font-size-xs);color:var(--color-text-muted);margin-bottom:var(--space-2)}.footer__author{color:var(--color-accent-secondary);text-decoration:none;font-weight:500;transition:all var(--transition-fast)}.footer__author:hover{color:var(--color-accent-primary);text-decoration:underline}.footer__copyright{font-size:var(--font-size-xs);color:var(--color-text-muted);opacity:.7;margin-top:var(--space-2)}@media(max-width:640px){.app{padding:var(--space-6) var(--space-3)}.header__title{font-size:var(--font-size-2xl)}.upload-zone{padding:var(--space-8) var(--space-4)}.controls__presets-grid{grid-template-columns:1fr}.output__actions{flex-direction:column}.how-to-use{margin:var(--space-8) auto var(--space-6)}.how-to-use__step{padding:var(--space-3);gap:var(--space-3)}.how-to-use__number{width:28px;height:28px;font-size:var(--font-size-xs)}}