:root{color-scheme:dark;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100vh;background:#0a0a0a;color:#fafafa}.shell{min-height:100vh;display:flex;justify-content:center;padding:2rem 1rem}.container{max-width:480px;width:100%}.header{text-align:center;margin-bottom:2rem}.title{margin:0 0 .35rem;font-size:1.75rem;font-weight:700;letter-spacing:-.02em;background:linear-gradient(135deg,#ec4899,#a855f7);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.subtitle{margin:0;color:#ffffff73;font-size:.9rem}.viz-card{position:relative;background:#ffffff06;border:1px solid rgba(255,255,255,.07);border-radius:.75rem;padding:1rem;margin-bottom:1.75rem;overflow:hidden}.waveform{width:100%;height:100px;display:block}.viz-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;color:#ffffff40;font-size:.8rem}.viz-icon{font-size:1.5rem;opacity:.4}.section{margin-bottom:1.5rem}.section-title{margin:0 0 .65rem;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:#ffffff80}.presets{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}.preset-btn{display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:.7rem .4rem;background:#ffffff09;border:1px solid rgba(255,255,255,.07);border-radius:.5rem;color:#ffffffa6;font-size:.8rem;font-weight:500;cursor:pointer;transition:all .2s ease}.preset-btn:hover{background:#ffffff12;border-color:#ffffff24}.preset-btn.active{background:linear-gradient(135deg,#ec48992e,#a855f72e);border-color:#ec489973;color:#f472b6}.preset-shift{font-size:.65rem;opacity:.5;font-variant-numeric:tabular-nums}.slider-header{display:flex;justify-content:space-between;align-items:baseline}.slider-value{font-size:.8rem;font-weight:600;color:#ec4899;font-variant-numeric:tabular-nums}.slider{width:100%;height:6px;border-radius:3px;background:#ffffff14;outline:none;margin:.75rem 0 .4rem;-webkit-appearance:none;-moz-appearance:none;appearance:none}.slider::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,#ec4899,#a855f7);cursor:pointer;box-shadow:0 0 12px #ec489966;transition:box-shadow .2s}.slider::-webkit-slider-thumb:hover{box-shadow:0 0 18px #ec489999}.slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,#ec4899,#a855f7);cursor:pointer;border:none;box-shadow:0 0 12px #ec489966}.slider-labels{display:flex;justify-content:space-between;font-size:.65rem;color:#ffffff40}.error{background:#ef44441a;border:1px solid rgba(239,68,68,.25);color:#fca5a5;padding:.75rem 1rem;border-radius:.5rem;font-size:.82rem;margin-bottom:1rem;line-height:1.5}.main-btn{width:100%;padding:.95rem;border:none;border-radius:.75rem;font-size:.95rem;font-weight:600;color:#fff;cursor:pointer;background:linear-gradient(135deg,#ec4899,#a855f7);box-shadow:0 4px 20px #ec48994d;transition:all .2s ease;letter-spacing:.01em}.main-btn:hover{transform:translateY(-1px);box-shadow:0 6px 28px #ec489966}.main-btn:active{transform:translateY(0)}.main-btn.stop{background:linear-gradient(135deg,#ef4444,#b91c1c);box-shadow:0 4px 20px #ef44444d}.main-btn.stop:hover{box-shadow:0 6px 28px #ef444466}.tips{margin-top:1.5rem;text-align:center}.tips p{margin:.25rem 0;font-size:.72rem;color:#ffffff4d}