body{font-family:'Comic Sans MS','Fredoka One','Nunito',system-ui,sans-serif;background:linear-gradient(135deg,#74ebd5 0%,#9face6 100%);margin:0;padding:20px;display:flex;justify-content:center;align-items:center;min-height:100vh}.container{background:#fff;width:100%;max-width:450px;border-radius:30px;padding:30px;box-shadow:0 15px 35px rgba(0,0,0,.2);border:6px solid #fff}h2{text-align:center;color:#ff6b6b;font-size:28px;text-shadow:2px 2px 0 #ffe6e6;margin-bottom:25px;margin-top:0}.btn{display:block;width:100%;padding:16px 20px;margin:15px 0;border:none;border-radius:20px;font-size:18px;font-weight:700;cursor:pointer;transition:all .1s ease;font-family:inherit}.btn:active{transform:translateY(6px);box-shadow:0 0 0 transparent!important}.btn-surat{background:#48dbfb;color:#054f63;box-shadow:0 6px 0 #0abde3;text-align:left}.btn-surat:hover{background:#6ae3fa}.btn-play{background:#1dd1a1;color:#034b38;box-shadow:0 6px 0 #10ac84;text-align:center;font-size:20px}.btn-ayat{background:#feca57;color:#634503;box-shadow:0 6px 0 #ff9f43;text-align:center}.btn-back{background:#ff6b6b;color:#fff;box-shadow:0 6px 0 #ee5253;text-align:center;margin-top:30px}.grid-ayat{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:15px}.grid-ayat .btn{text-align:center;padding:15px 0;margin:0;border-radius:18px;font-size:22px;background:#ff9ff3;color:#5f0855;box-shadow:0 6px 0 #f368e0}#now-playing{text-align:center;font-weight:700;color:#576574;background:#eef2f5;padding:10px;border-radius:15px;margin-bottom:10px;border:2px dashed #c8d6e5}audio{width:100%;border-radius:15px}