:root{color-scheme:dark;font-family:Tahoma,Arial,sans-serif;color:#f3efdf;background:#101c21}*{box-sizing:border-box}body{margin:0;min-height:100svh;overflow-x:hidden}.scene,.shade{position:fixed;inset:0;pointer-events:none}.scene{background:radial-gradient(ellipse at 50% 28%,#263f43 0%,#14272d 42%,#0d1a20 80%)}.shade{background:linear-gradient(0deg,rgba(5,15,20,.94),transparent 55%,rgba(5,15,20,.4)),linear-gradient(270deg,rgba(5,15,20,.48),transparent 65%)}header,main,footer{position:relative}header{padding:30px 5vw;display:flex;align-items:center;justify-content:space-between}.brand{color:inherit;text-decoration:none;font-size:33px;letter-spacing:-2px}.brand span{display:block;font-size:11px;letter-spacing:1px;color:#d1d4ca;margin-top:3px}button,select,input{font:inherit}button{cursor:pointer}.quiet{border:1px solid #d4e0d32b;border-radius:30px;background:#13272b66;color:#e0e5dc;padding:10px 17px;backdrop-filter:blur(10px);font-size:12px}.quiet:first-letter{font-size:20px}main{min-height:calc(100svh - 180px);padding:4vh 7vw 26px;display:flex;flex-direction:column;justify-content:space-between;gap:50px}.intro{max-width:450px;text-shadow:0 2px 20px #06151a70}.eyebrow{font-size:12px;color:#e0dfcd;display:flex;align-items:center;gap:9px}.eyebrow i{height:5px;width:5px;background:#d4be8d;border-radius:50%}h1{font-size:clamp(40px,5vw,72px);font-weight:400;line-height:1.35;margin:19px 0 15px;letter-spacing:-2px}.intro p{font-size:14px;color:#e0e4db;line-height:1.9}.player{width:min(490px,100%);align-self:center;background:#13272bd9;border:1px solid #d2dbc128;border-radius:23px;padding:25px 28px 15px;backdrop-filter:blur(22px);box-shadow:0 18px 55px #0003}.track{display:flex;align-items:center;gap:14px}.rain-icon{width:46px;height:46px;border:1px solid #a6bebc36;display:grid;place-items:center;border-radius:14px;color:#b6cfcb;font-size:27px}h2{font-size:17px;font-weight:400;margin:0 0 6px}.track span{font-size:11px;color:#b0c2bc}.wave{display:flex;align-items:center;gap:3px;margin-right:auto;height:24px}.wave i{width:2px;height:7px;background:#bbd1bf;border-radius:2px}.playing .wave i{animation:wave 1s infinite alternate}.wave i:nth-child(2n){height:20px;animation-delay:-.5s}.wave i:nth-child(3){height:13px;animation-delay:-.8s}.controls{display:flex;align-items:center;gap:22px;margin-top:25px}.play{border:0;flex:none;width:55px;height:55px;border-radius:50%;background:#dedfbe;color:#1b3337;display:grid;place-items:center;transition:transform .2s}.play:hover{transform:scale(1.06)}.volume{flex:1}.volume label{font-size:10px;display:flex;justify-content:space-between;color:#c0cec7;gap:8px}.volume input{width:100%;accent-color:#d4d8ba;cursor:pointer;height:22px;direction:ltr}.timer{font-size:10px;color:#c0cec7}.timer select{display:block;background:transparent;border:0;color:#f0eee0;font-size:12px;margin-top:7px;max-width:95px}.timer option{background:#152b30}.player-foot{margin-top:23px;padding-top:13px;border-top:1px solid #b2c7b81c;display:flex;justify-content:space-between;font-size:10px;color:#9fb4ac}footer{padding:8px 5vw 23px;display:flex;justify-content:space-between;font-size:10px;color:#a2b4ad}button:focus-visible,select:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid #e0d9aa;outline-offset:5px}.still .scene,.still .wave i{animation:none}@keyframes breathe{to{transform:scale(1.025)}}@keyframes wave{to{height:4px}}@media(prefers-reduced-motion:reduce){.scene,.wave i{animation:none!important}}@media(max-width:600px){header{padding:23px 24px}.brand{font-size:28px}.scene{background-position:54% center}.shade{background:linear-gradient(0deg,#09191ef5,transparent 65%,#08161c80)}main{min-height:calc(100svh - 153px);padding:12px 20px 20px;gap:200px}.intro{padding-right:5px}h1{font-size:43px;line-height:1.35;margin-top:15px}.intro p{font-size:12px}.eyebrow{font-size:10px}.player{padding:20px 20px 13px}.controls{gap:16px}.play{width:50px;height:50px}footer{padding:6px 24px 20px;font-size:9px}.quiet{font-size:10px;padding:8px 13px}}@media(max-width:360px){.controls{gap:10px}.player{padding:18px 15px}.timer select{max-width:76px}}

/* Quiet, image-free layout */
main{justify-content:center;align-items:center;gap:42px;padding-top:35px;padding-bottom:45px}.intro{text-align:center;max-width:560px}.eyebrow{justify-content:center}.shade{background:radial-gradient(ellipse at 50% 52%,transparent 25%,#07131855 100%)}h1{font-size:clamp(46px,6vw,76px);line-height:1.3}.player{background:#193034a6;box-shadow:0 18px 80px #0002}.scene{animation:none}.quiet{min-height:44px}.timer select{min-height:32px}footer{gap:15px}.rain-icon{border-radius:50%}@media(max-width:600px){main{gap:36px;padding:30px 20px 35px;min-height:calc(100svh - 160px)}.intro{padding:0}h1{font-size:48px;margin:20px 0}.eyebrow{font-size:11px}.intro p{font-size:13px}.player{max-width:440px}.controls{gap:15px}.volume{min-width:0}}

@font-face{font-family:Tajawal;src:url("Tajawal-Regular.ttf") format("truetype");font-style:normal;font-weight:400;font-display:swap}:root{font-family:Tajawal,Arial,sans-serif}.brand{letter-spacing:0;font-size:36px}.brand span{letter-spacing:0;font-size:13px}.intro p{font-size:22px;color:#d6dfd6;margin:0;line-height:1.8}main{gap:28px}h2{font-size:21px}.track span{font-size:13px}.volume label,.timer,.player-foot{font-size:12px}.timer select{font-size:14px}footer{font-size:12px}.playing .wave i{animation:none}@media(max-width:600px){.intro p{font-size:20px}main{gap:26px}.track span{font-size:12px}footer{font-size:10px}.brand{font-size:32px}}

footer{justify-content:flex-start}.credit{font-family:Tajawal,Arial,sans-serif;font-size:14px;color:#a2b4ad;letter-spacing:.2px}.timer-status{margin-top:18px;font-size:12px;color:#b5c8be;text-align:center}.timer-status[hidden]{display:none}.player{padding-bottom:25px}