body { background:#0e0d14; color:#ece9f5; font-family:'DM Sans',system-ui,sans-serif; }

    /* Slider durasi */
    input[type=range] { -webkit-appearance:none; appearance:none; height:6px; border-radius:999px; background:#2a2735; outline:none; }
    input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:20px; height:20px; border-radius:50%; background:#ff7a59; border:3px solid #0e0d14; cursor:pointer; }
    input[type=range]::-moz-range-thumb { width:16px; height:16px; border-radius:50%; background:#ff7a59; border:3px solid #0e0d14; cursor:pointer; }

    /* Gelombang suara yang bergerak saat loading */
    .wave { display:inline-flex; align-items:center; gap:3px; height:18px; }
    .wave span { width:3px; border-radius:2px; background:currentColor; height:30%; animation:bar 0.9s ease-in-out infinite; }
    .wave span:nth-child(2){ animation-delay:.1s } .wave span:nth-child(3){ animation-delay:.2s }
    .wave span:nth-child(4){ animation-delay:.3s } .wave span:nth-child(5){ animation-delay:.4s }
    @keyframes bar { 0%,100%{height:25%} 50%{height:100%} }
    @media (prefers-reduced-motion: reduce) { .wave span { animation:none; height:60%; } }

    /* Fokus keyboard yang jelas */
    :focus-visible { outline:2px solid #a78bfa; outline-offset:2px; }

    audio { width:100%; height:44px; }
    .hidden-view { display:none; }