:root{--color-primary: #18c5fe;--color-primary-light: #54595F;--color-primary-dark: #1D4ED8;--color-accent: #06B6D4;--color-success: #10B981;--color-warning: #F59E0B;--color-error: #EF4444;--color-text: #7A7A7A;--color-text-secondary: #6B7280;--color-background: #FFFFFF;--color-background-alt: #F9FAFB;--color-border: #E5E7EB;--color-card: #FFFFFF;--spacing-1: 4px;--spacing-2: 8px;--spacing-3: 12px;--spacing-4: 16px;--spacing-5: 20px;--spacing-6: 24px;--spacing-8: 32px;--spacing-10: 40px;--spacing-12: 48px;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--border-radius-sm: 4px;--border-radius-md: 8px;--border-radius-lg: 12px;--border-width: 1px;--font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-md: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--transition-fast: .15s ease;--transition-normal: .25s ease;--transition-slow: .35s ease}body.dark-mode{--color-text: #F9FAFB;--color-text-secondary: #9CA3AF;--color-background: #111827;--color-background-alt: #1F2937;--color-border: #374151;--color-card: #1F2937;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .25);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .3), 0 2px 4px -1px rgba(0, 0, 0, .26);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .3), 0 4px 6px -2px rgba(0, 0, 0, .25)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-family);background-color:var(--color-background);color:var(--color-text);line-height:1.5;transition:background-color var(--transition-normal),color var(--transition-normal)}#app{display:flex;flex-direction:column;min-height:100vh}.container-header{width:100%;max-width:1200px;padding:0 var(--spacing-4)}.container{width:100%;max-width:1200px;margin:0 auto;padding:0 var(--spacing-4)}.header{padding:var(--spacing-4) 0;background-color:var(--color-background-alt);border-bottom:var(--border-width) solid var(--color-border);box-shadow:var(--shadow-sm);position:sticky;top:0;z-index:10}.header .container-header{display:flex;align-items:center;justify-content:space-between}.logo{display:flex;align-items:center;gap:var(--spacing-3)}.logo-icon{display:flex;align-items:center;justify-content:center;width:36px;height:36px;background-color:var(--color-primary);color:#fff;border-radius:var(--border-radius-md)}.logo h1{font-size:var(--font-size-xl);font-weight:600}.theme-toggle button{background:none;border:none;color:var(--color-text-secondary);cursor:pointer;padding:var(--spacing-2);border-radius:var(--border-radius-md);transition:color var(--transition-fast),background-color var(--transition-fast)}.theme-toggle button:hover{color:var(--color-text);background-color:var(--color-border)}.main{flex:1;padding:var(--spacing-8) 0}.app-card{background-color:var(--color-card);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-md);overflow:hidden;padding:var(--spacing-6);display:flex;flex-direction:column;gap:var(--spacing-6)}.text-input-container{display:flex;flex-direction:column;gap:var(--spacing-3)}.text-input-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--spacing-2)}.text-input-header h2{font-size:var(--font-size-lg);font-weight:600}.text-stats{font-size:var(--font-size-sm);color:var(--color-text-secondary)}.text-stats .separator{margin:0 var(--spacing-2)}.text-input-wrapper{position:relative}textarea{width:100%;min-height:160px;padding:var(--spacing-4);border:var(--border-width) solid var(--color-border);border-radius:var(--border-radius-md);background-color:var(--color-background);color:var(--color-text);font-family:var(--font-family);font-size:var(--font-size-md);resize:vertical;transition:border-color var(--transition-fast)}textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px #3b82f633}.icon-button{position:absolute;right:var(--spacing-3);top:var(--spacing-3);padding:var(--spacing-2);background:none;border:none;color:var(--color-text-secondary);cursor:pointer;border-radius:var(--border-radius-md);transition:color var(--transition-fast),background-color var(--transition-fast)}.icon-button:hover{color:var(--color-text);background-color:var(--color-border)}.controls-container{display:flex;flex-direction:column;gap:var(--spacing-5)}.controls-row{display:flex;gap:var(--spacing-4);flex-wrap:wrap}.control-group{display:flex;flex-direction:column;gap:var(--spacing-2);flex:1;min-width:150px}.control-group.full-width{width:100%}.control-group label{font-size:var(--font-size-sm);font-weight:500;display:flex;justify-content:space-between;align-items:center}.select-wrapper{position:relative}select{width:100%;padding:var(--spacing-3);-webkit-appearance:none;-moz-appearance:none;appearance:none;border:var(--border-width) solid var(--color-border);border-radius:var(--border-radius-md);background-color:var(--color-background);color:var(--color-text);font-family:var(--font-family);font-size:var(--font-size-md);cursor:pointer;transition:border-color var(--transition-fast)}select:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px #3b82f633}.select-arrow{position:absolute;right:var(--spacing-3);top:50%;transform:translateY(-50%);pointer-events:none;color:var(--color-text-secondary)}input[type=range]{width:100%;margin:var(--spacing-1) 0;height:6px;-webkit-appearance:none;background:var(--color-border);border-radius:3px;cursor:pointer}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--color-primary);cursor:pointer;-webkit-transition:background var(--transition-fast);transition:background var(--transition-fast)}input[type=range]::-moz-range-thumb{width:18px;height:18px;border:none;border-radius:50%;background:var(--color-primary);cursor:pointer;-moz-transition:background var(--transition-fast);transition:background var(--transition-fast)}input[type=range]:focus{outline:none}input[type=range]:focus::-webkit-slider-thumb{background:var(--color-primary-dark)}input[type=range]:focus::-moz-range-thumb{background:var(--color-primary-dark)}.range-labels{display:flex;justify-content:space-between;font-size:var(--font-size-xs);color:var(--color-text-secondary);margin-top:var(--spacing-1)}.preview-button{display:flex;align-items:center;justify-content:center;gap:var(--spacing-1);margin-top:var(--spacing-2);padding:var(--spacing-1) var(--spacing-3);background-color:transparent;color:var(--color-primary);border:var(--border-width) solid var(--color-primary);border-radius:var(--border-radius-md);font-size:var(--font-size-xs);font-weight:500;cursor:pointer;transition:background-color var(--transition-fast),color var(--transition-fast)}.preview-button:hover{background-color:var(--color-primary-light);color:#fff}.playback-controls{display:flex;gap:var(--spacing-3);flex-wrap:wrap}.primary-button,.secondary-button{display:flex;align-items:center;justify-content:center;gap:var(--spacing-2);padding:var(--spacing-3) var(--spacing-5);border-radius:var(--border-radius-md);font-weight:500;cursor:pointer;transition:background-color var(--transition-fast),color var(--transition-fast),opacity var(--transition-fast)}.primary-button{background-color:var(--color-primary);color:#fff;border:none;flex:2}.primary-button:hover{background-color:var(--color-primary-dark)}.secondary-button{background-color:var(--color-background-alt);color:var(--color-text);border:var(--border-width) solid var(--color-border);flex:1}.secondary-button:hover{background-color:var(--color-border)}button:disabled{opacity:.6;cursor:not-allowed}button:disabled:hover{background-color:var(--color-primary)}.secondary-button:disabled:hover{background-color:var(--color-background-alt)}.progress-container{width:100%;transition:opacity var(--transition-normal)}.progress-container.hidden{opacity:0;height:0;overflow:hidden}.progress-bar{width:100%;height:6px;background-color:var(--color-border);border-radius:3px;overflow:hidden;margin-bottom:var(--spacing-2)}.progress{height:100%;background-color:var(--color-primary);transition:width var(--transition-fast);width:0%}.progress-info{display:flex;justify-content:space-between;font-size:var(--font-size-xs);color:var(--color-text-secondary)}.footer{margin-top:auto;padding:var(--spacing-6) 0;background-color:var(--color-background-alt);border-top:var(--border-width) solid var(--color-border)}.footer p{color:var(--color-text-secondary);font-size:var(--font-size-sm);text-align:center}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}.pulse{animation:pulse 2s ease infinite}@media (max-width: 640px){.controls-row{flex-direction:column;gap:var(--spacing-4)}.control-group{width:100%}.app-card{padding:var(--spacing-4);gap:var(--spacing-5)}.playback-controls{flex-direction:column}.primary-button,.secondary-button{width:100%}}p a{color:#ffffffb3;text-decoration:none;cursor:pointer}p a:hover{text-decoration:none}