*{box-sizing:border-box;margin:0;padding:0}body{font-family:Segoe UI,Tahoma,sans-serif;background:#f2f5f8;color:#333}.app{max-width:600px;margin:2rem auto;background:#fff;padding:1.5rem 2rem;border-radius:8px;box-shadow:0 4px 12px #0000000d}h1{font-size:1.8rem;margin-bottom:1rem;color:#222}h2{font-size:1.4rem;margin:1rem 0;color:#444}button{font:inherit;cursor:pointer;border:none;border-radius:4px;padding:.4rem .8rem;margin:.25rem;background:#007acc;color:#fff;transition:background .2s ease}button:hover{background:#005fa3}#back{background:#6c757d}#back:hover{background:#5a6268}#dl{background:#28a745}#dl:hover{background:#218838}ul.track-list{list-style:none;margin:0;padding:0}ul.track-list li{display:flex;justify-content:space-between;align-items:center;padding:.6rem 0;border-bottom:1px solid #e0e6ed}ul.track-list li:last-child{border-bottom:none}audio{width:100%;margin:1rem 0;border-radius:4px;outline:none}.mode-buttons{margin-top:.5rem}.mode-buttons button{background:#17a2b8}.mode-buttons button:hover{background:#117a8b}