:root{--primary:#6366f1;--primary-dark:#4f46e5;--gray-100:#f3f4f6;--gray-200:#e5e7eb;--gray-700:#374151;--gray-900:#111827}body{font-family:'Inter',sans-serif;margin:0;padding:0;background-color:var(--gray-100);color:var(--gray-900)}.container{max-width:1200px;margin:0 auto;padding:2rem}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}h1{font-weight:600;margin:0;color:var(--primary-dark)}h1 i{margin-right:0.5rem}.dropzone{border:2px dashed var(--gray-200);border-radius:0.5rem;padding:3rem;text-align:center;background-color:white;margin-bottom:2rem;cursor:pointer;transition:all 0.2s}.dropzone:hover{border-color:var(--primary)}.dropzone.active{border-color:var(--primary);background-color:rgba(99,102,241,0.05)}.waveform-container{background-color:white;border-radius:0.5rem;padding:1.5rem;margin-bottom:2rem;box-shadow:0 1px 3px rgba(0,0,0,0.1)}.controls{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem;margin-bottom:2rem}.control-group{background-color:white;border-radius:0.5rem;padding:1.5rem;box-shadow:0 1px 3px rgba(0,0,0,0.1)}.control-group h3{margin-top:0;margin-bottom:1rem;font-size:1rem;font-weight:500;color:var(--gray-700)}.slider-container{margin-bottom:1rem}.slider-container label{display:block;margin-bottom:0.5rem;font-size:0.875rem}input[type="range"]{width:100%}.btn{background-color:var(--primary);color:white;border:none;border-radius:0.375rem;padding:0.75rem 1.5rem;font-size:1rem;font-weight:500;cursor:pointer;transition:background-color 0.2s;display:inline-flex;align-items:center;gap:0.5rem}.btn:hover{background-color:var(--primary-dark)}.btn-secondary{background-color:var(--gray-200);color:var(--gray-700)}.btn-secondary:hover{background-color:var(--gray-700);color:white}.export-options{display:flex;gap:1rem;margin-bottom:1rem;flex-wrap:wrap}select,.btn{padding:0.5rem 1rem;border-radius:0.375rem;border:1px solid var(--gray-200)}.time-display{font-family:monospace;font-size:0.875rem;color:var(--gray-700);margin-top:0.5rem}.selection-info{display:flex;justify-content:space-between;margin-bottom:1rem;align-items:center}.hidden{display:none}@media (max-width:768px){.controls{grid-template-columns:1fr}.export-options{flex-direction:column}header{flex-direction:column;align-items:flex-start;gap:1rem}}
#waveform {
    width: 100%;
    height: 150px;
    background-color: #f8fafc;
    border-radius: 0.25rem;
    overflow: hidden;
  }
  
  #waveform wave {
    overflow: hidden;
  }
  
  #waveform canvas {
    width: 100% !important;
  }