body{font-family:Arial,Helvetica Neue,Helvetica,sans-serif;line-height:1.2;margin:0;padding:80px 20px 20px;background-color:#f4f4f4;color:#333}.container{max-width:960px;margin:auto;background-color:#fff;padding:20px;border-radius:8px;box-shadow:0 0 10px #0000001a}h1{text-align:center;color:#333;margin-bottom:20px;font-size:4em}#audio-controls{position:sticky;top:0;z-index:1000;display:flex;align-items:center;justify-content:center;margin:-20px -20px 20px;padding:15px 20px;background-color:#eee;border-radius:8px 8px 0 0;box-shadow:0 2px 10px #0000001a}#playPauseBtn{background-color:#007bff;border:none;width:50px;height:50px;border-radius:10px;cursor:pointer;position:relative;transition:all .2s ease;margin:0 10px;display:flex;align-items:center;justify-content:center}#playPauseBtn:hover{background-color:#0056b3}#playPauseBtn:before{content:"";width:0;height:0;border-style:solid;border-width:12px 0 12px 20px;border-color:transparent transparent transparent white;margin-left:3px;transition:all .2s ease}#playPauseBtn:after{content:"";position:absolute;width:5px;height:20px;background-color:#fff;border-radius:1px;left:calc(50% - 7px);top:50%;transform:translateY(-50%);opacity:0;transition:all .2s ease;box-shadow:9px 0 #fff}#playPauseBtn.playing:before{opacity:0}#playPauseBtn.playing:after{opacity:1}#seekBar{flex-grow:1;margin:0 10px;cursor:pointer;direction:ltr}.time-display{font-size:.9em;color:#555;min-width:90px;text-align:center;direction:ltr}#text-container{font-size:2.8em;text-align:right;line-height:1.1}#text-container p{margin-bottom:15px;padding:5px;border-radius:3px}#text-container .verse-number{font-weight:700;color:#666;font-size:.8em;margin-left:10px;display:inline-block}.highlight{background-color:#fff352;color:#000;transition:background-color .1s ease-in-out}.clickable-word{cursor:pointer;transition:all .2s ease-in-out;border-radius:3px;padding:1px 2px}.clickable-word:hover{background-color:#e6f3ff;box-shadow:0 1px 3px #0000001a}.clickable-word:active{background-color:#cce7ff;transform:scale(.98)}.clickable-word.highlight{background-color:#fff352!important;color:#000!important;box-shadow:0 2px 5px #fff3524d}.clickable-word.highlight:hover{background-color:#fff352!important;color:#000!important;box-shadow:0 2px 8px #fff35280}.cards-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px;margin-top:40px;max-width:800px;margin-left:auto;margin-right:auto}.card{text-decoration:none;color:inherit;display:block;background-color:#fff;border:2px solid #e0e0e0;border-radius:12px;padding:0;transition:all .3s ease;box-shadow:0 2px 8px #0000001a;overflow:hidden}.card:hover{transform:translateY(-5px);box-shadow:0 4px 16px #00000026;border-color:#007bff}.card-content{padding:40px 30px;text-align:center}.card h2{font-size:2.5em;margin:0 0 15px;color:#333}.card p{font-size:1.2em;color:#666;margin:0}@media (max-width: 768px){.cards-container{grid-template-columns:1fr;gap:20px}.card-content{padding:30px 20px}.card h2{font-size:2em}}.back-button{display:inline-block;margin-bottom:20px;padding:10px 20px;background-color:#f0f0f0;color:#333;text-decoration:none;border-radius:6px;font-size:1em;transition:all .2s ease;border:1px solid #ddd}.back-button:hover{background-color:#e0e0e0;border-color:#007bff;color:#007bff;transform:translate(-3px)}.back-button:active{transform:translate(-1px);background-color:#d0d0d0}