*{box-sizing:border-box}
:root{color-scheme:dark;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body{margin:0;min-height:100vh;background:#070707;color:#f4ead0;overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.13;background-image:
linear-gradient(30deg,#b88925 12%,transparent 12.5%,transparent 87%,#b88925 87.5%,#b88925),
linear-gradient(150deg,#b88925 12%,transparent 12.5%,transparent 87%,#b88925 87.5%,#b88925);
background-size:72px 72px;mask-image:linear-gradient(to right,transparent,#000 15%,#000 85%,transparent)}
.ambient{position:fixed;width:600px;height:600px;border-radius:50%;left:50%;top:38%;transform:translate(-50%,-50%);background:#9a6a12;filter:blur(130px);opacity:.10;pointer-events:none}
.topbar{height:90px;padding:0 42px;display:flex;align-items:center;border-bottom:1px solid #1b1813;gap:28px;position:relative;z-index:2}
.brand{display:flex;align-items:center;gap:13px;flex:1}.brand-mark{font-size:31px;color:#d7a536}.brand-name{font-size:25px;font-weight:800;letter-spacing:1px}.brand-sub{font-size:12px;color:#9d927e;letter-spacing:3px;margin-top:2px}
.status{font-weight:800;letter-spacing:1px;color:#ff5858}.dot{display:inline-block;width:9px;height:9px;background:#e53935;border-radius:50%;box-shadow:0 0 12px #e53935;margin-right:7px}
.listeners{border:1px solid #302817;border-radius:12px;padding:10px 16px;color:#b9ae99;font-size:11px;letter-spacing:1px}.listeners b{color:#f3e6c7;font-size:15px;margin-right:4px}
main{max-width:1250px;margin:0 auto;padding:35px 35px 15px}
.hero{min-height:510px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.ornament-wrap{width:390px;height:390px;position:relative;display:grid;place-items:center}
.ornament{width:315px;height:315px;border-radius:50%;display:grid;place-items:center;border:1px solid #a87921;box-shadow:0 0 40px #a879211c,inset 0 0 35px #a8792120;animation:float 4s ease-in-out infinite}
.ornament:before,.ornament:after{content:"";position:absolute;width:280px;height:280px;border:2px solid #d9a83e;transform:rotate(45deg);opacity:.5}
.ornament:after{transform:rotate(22.5deg);width:225px;height:225px;opacity:.3}
.ornament-inner{width:145px;height:145px;border-radius:50%;background:#090807;border:1px solid #d0a039;display:grid;place-items:center;align-content:center;box-shadow:0 0 30px #d6a52d25;position:relative;z-index:2}
.mic{font-size:42px;color:#e0b24b;line-height:1}.live-word{font-size:18px;font-weight:700;letter-spacing:3px;color:#e5c47c;margin-top:7px}
.orbit{position:absolute;border:1px dashed #a87921;border-radius:50%;inset:8px;animation:spin 22s linear infinite}.orbit-b{inset:0;border-style:dotted;animation-direction:reverse;animation-duration:30s}
.now{margin-top:-2px}.eyebrow{font-size:11px;letter-spacing:3px;color:#8e8678;font-weight:800}.now h1{font-size:48px;margin:8px 0 3px;letter-spacing:-1px}.surah{font-size:22px;color:#d9c39a}.meta{margin-top:14px;color:#777064;font-size:11px;letter-spacing:1px;display:flex;justify-content:center;gap:10px}
.player{min-height:105px;border:1px solid #302818;background:#0c0b09d9;border-radius:22px;padding:18px 22px;display:flex;align-items:center;gap:20px;box-shadow:0 20px 70px #0008}
.play{width:68px;height:68px;border:0;border-radius:50%;background:#d9a638;color:#090806;font-size:23px;cursor:pointer;box-shadow:0 0 24px #d9a63833}.play:hover{filter:brightness(1.1)}
.wave{width:35px;height:42px;display:flex;align-items:center;gap:3px}.wave i{display:block;width:3px;height:18px;background:#d8a437;border-radius:4px;animation:wave 1s ease-in-out infinite}.wave i:nth-child(2){height:30px;animation-delay:.1s}.wave i:nth-child(3){height:13px;animation-delay:.2s}.wave i:nth-child(4){height:36px;animation-delay:.3s}.wave i:nth-child(5){height:21px;animation-delay:.4s}.wave i:nth-child(6){height:31px;animation-delay:.5s}.wave i:nth-child(7){height:15px;animation-delay:.6s}
.track{flex:1;min-width:0}.track-title{font-size:10px;color:#c99a32;font-weight:800;letter-spacing:2px}.track-name{margin-top:5px;color:#c8bdab;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.progress{height:4px;background:#3b352a;border-radius:9px;margin-top:14px}.progress span{display:block;width:38%;height:100%;background:#d5a437;border-radius:9px}
.icon-btn{border:0;background:none;font-size:22px;cursor:pointer}.bitrate{border:1px solid #423721;border-radius:9px;padding:10px 13px;color:#b5a887;font-size:12px}
footer{text-align:center;color:#635d53;font-size:11px;letter-spacing:1px;padding:35px}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes float{50%{transform:translateY(-5px)}}@keyframes wave{50%{transform:scaleY(.45)}}
@media(max-width:700px){.topbar{padding:0 18px;height:76px}.brand-name{font-size:19px}.brand-sub{font-size:9px}.listeners{display:none}main{padding:20px 15px}.ornament-wrap{width:300px;height:300px}.ornament{width:245px;height:245px}.ornament:before{width:220px;height:220px}.ornament:after{width:175px;height:175px}.now h1{font-size:34px}.player{gap:10px;padding:14px}.wave,.bitrate{display:none}}