@import"https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@400;500;600;700&display=swap";:root{font-family:Noto Kufi Arabic,system-ui,sans-serif;color:#f5fff8;background:#021b0c;font-synthesis:none;text-rendering:optimizeLegibility;--surface: rgba(8, 55, 28, .72);--surface-strong: rgba(6, 44, 22, .92);--border: rgba(196, 255, 214, .14);--accent: #8ee9a9;--accent-strong: #c7ffd7;--muted: #a7cbb2;--shadow: 0 24px 70px rgba(0, 0, 0, .38)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(circle at 50% -20%,rgba(44,167,84,.35),transparent 42%),linear-gradient(180deg,#042710,#02170a 55%,#010c05)}button,input{font:inherit}button{-webkit-tap-highlight-color:transparent}.app-shell{position:relative;isolation:isolate;width:min(1180px,calc(100% - 32px));margin:0 auto;padding:42px 0 24px;overflow:hidden}.ambient{position:fixed;z-index:-1;width:440px;height:440px;border-radius:999px;filter:blur(110px);opacity:.16;pointer-events:none}.ambient-one{top:-140px;right:-170px;background:#38db71}.ambient-two{bottom:5%;left:-220px;background:#1b8f4c}.site-header,.section-heading,footer{display:flex;align-items:center;justify-content:space-between;gap:24px}.site-header{margin-bottom:30px}.eyebrow{margin:0 0 8px;color:var(--accent);font-size:.78rem;font-weight:700;letter-spacing:.06em}h1,h2,p{margin-top:0}h1{margin-bottom:8px;font-size:clamp(1.75rem,4vw,3rem);line-height:1.3}.header-copy{margin-bottom:0;color:var(--muted)}.header-copy-block{min-width:0}.header-actions{display:flex;align-items:center;justify-content:flex-start;gap:10px;flex:0 0 auto}.header-action{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 16px;border:1px solid var(--border);border-radius:15px;color:#effff4;background:#ffffff0e;cursor:pointer;transition:transform .16s ease,border-color .16s ease,background .16s ease}.header-action:hover:not(:disabled){transform:translateY(-2px);border-color:#c7ffd757;background:#ffffff17}.header-action:disabled{cursor:wait;opacity:.65}.header-action svg{width:20px;height:20px;flex:0 0 auto;fill:currentColor}.icon-only-action{width:46px;padding:0}.desktop-hidden{display:none}.site-notice{margin:-12px 0 22px;padding:12px 16px;border:1px solid rgba(142,233,169,.2);border-radius:15px;color:#dcffe6;background:#358c502e;font-size:.78rem;text-align:center;animation:notice-in .18s ease-out}.player-card{scroll-margin-top:30px}@keyframes notice-in{0%{transform:translateY(-6px);opacity:0}}.player-card{display:grid;grid-template-columns:minmax(260px,420px) 1fr;gap:clamp(28px,5vw,62px);align-items:center;padding:clamp(20px,4vw,42px);border:1px solid var(--border);border-radius:36px;background:linear-gradient(135deg,rgba(255,255,255,.08),transparent 42%),var(--surface);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}.player-cover-wrap{position:relative;aspect-ratio:1}.player-cover{position:relative;z-index:2;display:block;width:100%;height:100%;border-radius:28px;object-fit:cover;box-shadow:0 28px 55px #0000006b}.cover-pulse{position:absolute;inset:12%;z-index:1;border-radius:999px;background:#69f39159;filter:blur(36px);transform:scale(.8);opacity:0;transition:.28s ease}.cover-pulse.is-playing{opacity:1;animation:pulse 2.2s ease-in-out infinite}@keyframes pulse{50%{transform:scale(1.1);opacity:.68}}.player-content{min-width:0}.now-playing span{display:inline-block;margin-bottom:12px;padding:6px 12px;border:1px solid rgba(142,233,169,.22);border-radius:999px;color:var(--accent);background:#8ee9a914;font-size:.74rem;font-weight:700}.now-playing h2{margin-bottom:10px;font-size:clamp(1.65rem,4vw,2.8rem)}.now-playing p{margin-bottom:30px;color:var(--muted)}.timeline{direction:ltr}.range{width:100%;height:5px;margin:0;border:0;border-radius:999px;outline:none;appearance:none;background:linear-gradient(to right,var(--accent-strong) 0,var(--accent-strong) var(--range-progress),rgba(255,255,255,.14) var(--range-progress),rgba(255,255,255,.14) 100%);cursor:pointer}.range::-webkit-slider-thumb{width:16px;height:16px;border:3px solid #0b4825;border-radius:50%;appearance:none;background:var(--accent-strong);box-shadow:0 0 0 5px #c7ffd71f}.range::-moz-range-thumb{width:12px;height:12px;border:3px solid #0b4825;border-radius:50%;background:var(--accent-strong);box-shadow:0 0 0 5px #c7ffd71f}.time-row{display:flex;justify-content:space-between;margin-top:10px;color:var(--muted);font-size:.74rem}.controls{display:flex;align-items:center;justify-content:center;gap:18px;margin:25px 0}.icon-button,.play-button,.volume-button{display:grid;place-items:center;border:0;color:#eafff0;cursor:pointer;transition:transform .16s ease,background .16s ease}.icon-button:hover,.play-button:hover,.volume-button:hover{transform:translateY(-2px)}.icon-button{width:50px;height:50px;border:1px solid var(--border);border-radius:17px;background:#ffffff0f}.play-button{width:72px;height:72px;border-radius:24px;color:#05210f;background:linear-gradient(135deg,#d8ffe2,#75dc96);box-shadow:0 16px 36px #52d37a42}.icon-button svg,.play-button svg,.volume-button svg,.mini-play svg{width:24px;height:24px;fill:currentColor}.play-button svg{width:31px;height:31px}.volume-row{display:flex;direction:ltr;align-items:center;gap:12px;max-width:240px;margin:0 auto}.volume-button{flex:0 0 auto;width:34px;height:34px;background:transparent}.volume-range{height:4px}.audio-error{margin:18px 0 0;padding:12px 14px;border:1px solid rgba(255,203,128,.2);border-radius:14px;color:#ffe5bf;background:#ad651426;font-size:.78rem;text-align:center}.library-section{padding-top:56px}.section-heading{margin-bottom:22px}.section-heading h2{margin-bottom:0;font-size:clamp(1.4rem,3vw,2rem)}.section-heading>span{color:var(--muted);font-size:.8rem}.track-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.track-card{display:block;min-width:0;padding:10px;border:1px solid var(--border);border-radius:24px;color:inherit;background:#ffffff0b;box-shadow:0 14px 38px #0000002e;text-align:right;cursor:pointer;transition:transform .18s ease,border-color .18s ease,background .18s ease}.track-card:hover{transform:translateY(-5px);border-color:#c7ffd752;background:#ffffff12}.track-card.active{border-color:#8ee9a9b3;background:#308c4d38;box-shadow:0 14px 38px #00000038,0 0 0 3px #8ee9a914}.track-image-wrap{position:relative;display:block;aspect-ratio:1;overflow:hidden;border-radius:17px}.track-image-wrap img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .3s ease}.track-card:hover img{transform:scale(1.035)}.track-overlay{position:absolute;inset:0;display:grid;place-items:center;opacity:0;background:#00190a66;transition:opacity .18s ease}.track-card:hover .track-overlay,.track-card.active .track-overlay{opacity:1}.mini-play{display:grid;place-items:center;width:52px;height:52px;border:1px solid rgba(255,255,255,.35);border-radius:18px;color:#06210f;background:#e0ffe9e6;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.track-info{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;padding:14px 5px 5px}.track-info strong{overflow:hidden;font-size:.9rem;text-overflow:ellipsis;white-space:nowrap}.track-info>span{flex:0 0 auto;padding-top:2px;color:var(--muted);font-size:.67rem}footer{margin-top:48px;padding:24px 4px 0;border-top:1px solid var(--border);color:var(--muted);font-size:.72rem}@media(max-width:900px){.player-card{grid-template-columns:320px 1fr}.track-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:720px){.app-shell{width:min(100% - 22px,1180px);padding-top:24px}.site-header{align-items:flex-start}.header-actions{gap:8px}.header-action{min-height:42px;padding:0 12px;font-size:.75rem}.icon-only-action{width:42px;padding:0}.player-card{grid-template-columns:1fr;border-radius:28px}.player-cover-wrap{width:min(100%,390px);margin:0 auto}.player-content{text-align:center}.track-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:470px){.site-header{gap:12px}.site-header{flex-direction:column}.header-actions{width:100%}.header-action{flex:1 1 auto}.icon-only-action{width:auto;padding:0 13px}.desktop-hidden{display:inline}.section-heading{align-items:flex-end}.section-heading>span{max-width:120px;text-align:left}.track-grid{gap:11px}.track-card{padding:7px;border-radius:19px}.track-image-wrap{border-radius:13px}.track-info{display:block;padding:10px 3px 3px}.track-info strong,.track-info>span{display:block}.track-info>span{margin-top:4px}}.modal-backdrop{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:20px;background:#000c05c2;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);animation:modal-fade .16s ease-out}.modal-card{width:min(100%,570px);max-height:min(86vh,760px);overflow:auto;border:1px solid rgba(199,255,215,.2);border-radius:26px;background:linear-gradient(145deg,rgba(255,255,255,.075),transparent 38%),#06331a;box-shadow:0 34px 95px #0000008f;animation:modal-rise .2s ease-out}.modal-header{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:22px 24px 16px;border-bottom:1px solid var(--border);background:#06331af0;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.modal-header h2{margin:0;font-size:1.25rem}.modal-close{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--border);border-radius:13px;color:#effff4;background:#ffffff0e;cursor:pointer}.modal-close svg{width:20px;height:20px;fill:currentColor}.modal-body{padding:24px}.about-content>p{margin-bottom:22px;color:#c8e8d1;line-height:2}.about-highlight{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:22px;padding:16px 18px;border:1px solid rgba(142,233,169,.17);border-radius:17px;background:#8ee9a914}.about-highlight span{color:var(--muted);font-size:.78rem}.about-highlight strong{color:var(--accent-strong);font-size:.9rem}.recording-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}.recording-list li{padding:12px 14px;border:1px solid var(--border);border-radius:13px;color:#eafff0;background:#ffffff0a;font-size:.78rem}.contact-form{display:grid;gap:17px}.contact-form label{display:grid;gap:8px}.contact-form label>span{color:#dfffe7;font-size:.78rem;font-weight:700}.contact-form input,.contact-form textarea{width:100%;border:1px solid rgba(199,255,215,.16);border-radius:14px;outline:none;color:#f5fff8;background:#00120775;transition:border-color .16s ease,box-shadow .16s ease}.contact-form input{height:48px;padding:0 14px}.contact-form textarea{min-height:130px;padding:13px 14px;resize:vertical;line-height:1.8}.contact-form input:focus,.contact-form textarea:focus{border-color:#8ee9a9a6;box-shadow:0 0 0 4px #8ee9a914}.contact-form input::placeholder,.contact-form textarea::placeholder{color:#6f9d7b}.submit-button{min-height:50px;border:0;border-radius:15px;color:#05210f;background:linear-gradient(135deg,#d8ffe2,#75dc96);box-shadow:0 14px 30px #52d37a2e;cursor:pointer;font-weight:700}.form-note{margin:-4px 0 0;color:var(--muted);font-size:.7rem;text-align:center}@keyframes modal-fade{0%{opacity:0}}@keyframes modal-rise{0%{transform:translateY(14px) scale(.985);opacity:0}}.signature span{display:block;width:fit-content;margin-right:auto;margin-left:0}@media(max-width:600px){.modal-backdrop{align-items:end;padding:10px}.modal-card{width:100%;max-height:90vh;border-radius:24px 24px 18px 18px}.modal-header,.modal-body{padding-right:18px;padding-left:18px}.recording-list{grid-template-columns:1fr}.about-highlight{align-items:flex-start;flex-direction:column;gap:7px}}