/* Ramadan Passport 2027 · cover and inner pages */
:root{--night:#041e1c;--pine:#0a3029;--forest:#155341;--gold:#dbb767;--gold-light:#f6dfa0;--paper:#fffaf0;--ink:#17392f}
html{scroll-behavior:smooth}
body{background:radial-gradient(ellipse at 50% -15%,#235345 0,#0b2d29 42%,#061f1e 100%);color:var(--ink)}
body:before{opacity:.12;background-image:linear-gradient(30deg,#dfbf7125 1px,transparent 1px),linear-gradient(150deg,#dfbf7125 1px,transparent 1px);background-size:38px 66px}
.shell{max-width:1220px;padding-top:28px}
.top{min-height:318px;border-radius:24px;background:radial-gradient(circle at 18% 55%,#2b695145 0,transparent 39%),linear-gradient(125deg,#052522,#0b382e 55%,#051f1d);border:1px solid #c9a75b;box-shadow:inset 0 0 0 7px #06362d,inset 0 0 0 8px #b9975270,0 24px 55px #0005;padding:42px 58px;isolation:isolate}
.top:after{content:'✦  ✧  ✦';position:absolute;inset:auto auto 23px 40px;color:#e0bf7166;font-size:20px;letter-spacing:18px;z-index:-1}
.top-copy{position:relative;z-index:2;max-width:640px}
.top-brand{display:flex;align-items:center;gap:15px;margin-bottom:25px}
.top-brand .brand-slot{width:94px;height:61px;border-radius:12px;border:1px solid #d9b56e;background:#0a3b31}
.edition{display:inline-flex;color:#e8d7a5;border-inline-start:1px solid #be9b6080;padding-inline-start:15px;font-size:.9rem;font-weight:700}
.top .passport{border:none;background:transparent;padding:0;letter-spacing:.18em;font-size:.72rem;color:#dfc98c}
.top h1{font-size:clamp(3.6rem,6.3vw,6.4rem);line-height:1.04;margin:10px 0 8px;color:#ffedbb;text-shadow:0 3px 22px #c68d3b39}
.top p{font-size:1.03rem;color:#e6e6d8;max-width:500px}
.top-cover{position:absolute;height:360px;width:288px;object-fit:cover;object-position:center;left:7%;bottom:-54px;transform:rotate(-9deg);border-radius:16px;filter:drop-shadow(0 28px 20px #0007);z-index:1}
.user-summary{display:block;width:fit-content;margin-top:18px;background:#f1d38c1a;border-color:#ecd18c;color:#ffe3a0}
.nav{position:sticky;top:0;z-index:20;margin:32px 0 17px;padding:10px;border:1px solid #957b4d88;border-radius:17px;background:#062a26ee;backdrop-filter:blur(16px);box-shadow:0 10px 25px #0003;scrollbar-width:thin;scrollbar-color:#ab8b53 transparent}
.nav button{background:transparent;border:1px solid transparent;color:#f4e8cb;padding:10px 16px;border-radius:10px;box-shadow:none}
.nav button:hover{background:#e9c78318;border-color:#d8b66f7a}
.nav button.active{background:linear-gradient(135deg,#eecf86,#c99d4f);border-color:#f9e4ad;color:#0d3129;box-shadow:0 3px 10px #0004}
.product-strip{margin:0 0 14px;border-radius:15px;border:1px solid #b49158;background:linear-gradient(90deg,#194c3e,#0b332d);box-shadow:0 10px 25px #0003}
.strip-heading{background:#0a342b;min-width:125px;border-left:1px solid #ae8c57;font-size:.82rem;color:#f8e4ab}
.product-item{background:#f8f3e6;color:#1e4838;border:1px solid #dec78e;box-shadow:0 2px 6px #0003}
.product-copy strong{color:#144734}.product-copy small{color:#496a56}
.competition-bar{border:1px solid #bf9c5f;background:linear-gradient(120deg,#113c34,#0b3029);border-radius:15px;padding:14px 19px;box-shadow:0 9px 22px #0002}
.competition-title{color:#f8e5b2}.competition-title small{color:#e6d7af}
.leader-item{background:#fbf3df12;border-color:#dbbf7e65;border-radius:9px}
.install-card{border-radius:14px;border-color:#d5b878;background:linear-gradient(125deg,#fff9e9,#ebdfbb)}
.section{animation:page-enter .32s ease both}
@keyframes page-enter{from{opacity:.55;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.card{position:relative;background:linear-gradient(135deg,#fffdf7,#f8f2e5);border:1px solid #d8c39c;border-radius:16px;box-shadow:0 12px 30px #0003,inset 0 0 0 3px #fffdf7;overflow:hidden}
.card:after{content:'';position:absolute;right:0;left:0;top:0;height:3px;background:linear-gradient(90deg,transparent,#cca25a,transparent);opacity:.75;pointer-events:none}
.card h2,.card h3{font-family:Cairo,Tahoma,sans-serif;color:#0b4032}
.card h2:before,.card h3:before{color:#b3843a}
.cards3{gap:14px}.cards3 .card{min-height:190px}
.card .btn,.intro-enter{border-radius:9px}
.btn.goldbtn{background:linear-gradient(135deg,#f1d486,#d1a758);color:#123c31;box-shadow:0 3px 0 #96743d}
.pill{background:#e9e4d2;color:#185642;border:1px solid #d8c6a0}
.prayer,.worship-choice,.tasbih-breakdown>div{background:#f1eee3;border:1px solid #e2d8be}
.progress{background:#e8e2d1}.progress span{background:linear-gradient(90deg,#0b7956,#d4ad5d)}
.choice{background:#fffdf7;border-color:#d9cda9}.choice:hover{background:#f7efda}
.register-dialog{border:1px solid #c9a45e;border-radius:18px;background:linear-gradient(140deg,#fffcf5,#f5ead3);box-shadow:0 25px 85px #0009,inset 0 0 0 5px #fffaf1}
.register-dialog h2{font-family:Amiri,Cairo,serif;font-size:2.3rem;color:#0c4637}
.register-dialog .input{background:#fffdf8;border-color:#c9bc9e}
.footer{color:#d1caa8}

/* Full-cover opening with a real passport asset and space for the company logo. */
.intro-screen{background:radial-gradient(circle at 68% 50%,#164e42 0,#092d29 34%,#041b1b 78%);color:#f8f0d9}
.intro-screen:before,.intro-screen:after{content:'';position:absolute;inset:18px;border:1px solid #b896586b;border-radius:22px;pointer-events:none}
.intro-screen:after{inset:27px;border-color:#b8965836}
.intro-inner{max-width:1300px;min-height:100svh;padding:32px clamp(26px,5vw,70px);gap:18px}
.intro-brand{position:relative;z-index:2;gap:16px}
.intro-brand .brand-slot{width:105px;height:72px;border:1px solid #e3c882;background:#123d31}
.intro-eyebrow{font-size:.9rem;color:#dfc788}
.intro-stage{display:grid;grid-template-columns:1fr 1fr;align-items:center;min-height:0;flex:1;gap:20px}
.intro-content{padding:10px 0 35px;position:relative;z-index:2}
.intro-kicker{font-size:1rem;letter-spacing:.03em;color:#e0bd73}
.intro-content h1{font-size:clamp(4rem,7.7vw,7.4rem);line-height:1.01;margin:24px 0 22px;color:#f9e3aa;text-shadow:0 4px 25px #d6a64b3d}
.intro-content h1 em{color:#ffefc2}
.intro-content p{font-size:clamp(1.02rem,1.55vw,1.2rem);max-width:550px;color:#f0ead7;line-height:1.85}
.intro-features{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0}
.intro-features span{color:#f7e3aa;background:#e3c88014;border:1px solid #d6b46e83;padding:6px 11px;border-radius:7px;font-size:.88rem;font-weight:700}
.intro-enter{min-height:58px;background:linear-gradient(135deg,#ffe5a0,#d9ab56);color:#12352c;box-shadow:0 5px 0 #96733e,0 14px 26px #0004;padding:13px 27px;margin-top:12px}
.intro-enter:hover{filter:brightness(1.06)}
.intro-art{height:min(76vh,720px);min-height:460px;position:relative;display:flex;align-items:center;justify-content:center}
.intro-art:before{content:'';position:absolute;width:67%;aspect-ratio:1;filter:blur(60px);background:#d1a04a35;border-radius:50%}
.intro-art img{position:relative;height:100%;width:100%;object-fit:contain;mix-blend-mode:screen;filter:drop-shadow(0 28px 25px #0008)}
.intro-bottom{position:relative;z-index:2;text-align:center;color:#e0c988;font-size:.86rem;letter-spacing:.04em}
.intro-bottom span{margin:0 12px}

@media(max-width:850px){
 .shell{padding:14px 13px 80px}
 .top{min-height:232px;padding:28px 27px}
 .top h1{font-size:clamp(2.8rem,8vw,4.5rem)}
 .top-cover{height:248px;width:180px;left:0;bottom:-23px;opacity:.85}
 .top-copy{max-width:calc(100% - 130px)}
 .nav{margin:25px 0 13px;padding:7px}
 .nav button{padding:9px 13px}
 .intro-stage{grid-template-columns:1fr 1fr}
 .intro-art{height:55vh;min-height:360px}
 .intro-content h1{font-size:clamp(3.4rem,7vw,5.8rem)}
}
@media(max-width:600px){
 .top{min-height:248px;align-items:flex-start;padding:26px 22px}
 .top-copy{max-width:100%;padding-left:93px}
 .top h1{font-size:clamp(2.75rem,11vw,3.6rem)}
 .top p{font-size:.82rem;line-height:1.5}
 .top-brand{margin-bottom:15px}.top-brand .brand-slot{width:65px;height:45px}.edition{font-size:.68rem}
 .top-cover{height:175px;width:115px;left:-9px;bottom:-9px;transform:rotate(-9deg);opacity:.92}
 .user-summary{font-size:.82rem;line-height:1.5}
 .intro-inner{padding:24px 25px}
 .intro-stage{display:flex;flex-direction:column-reverse;justify-content:center;gap:0}
 .intro-art{height:32vh;min-height:210px;max-height:340px;width:100%}
 .intro-content{padding:0 0 15px;text-align:center}
 .intro-content h1{font-size:clamp(3.2rem,13vw,4.5rem);margin:8px 0}
 .intro-content p{font-size:.95rem;line-height:1.7;margin:0 auto}
 .intro-features{justify-content:center;margin:15px 0;gap:7px}
 .intro-features span{font-size:.72rem;padding:5px 8px}
 .intro-enter{width:100%;margin-top:2px}
 .intro-bottom{font-size:.72rem}
 .strip-heading{min-width:89px}
 .card{padding:20px}
}
@media(max-width:380px){.top-copy{padding-left:62px}.top-cover{height:142px;width:95px}.intro-art{height:26vh;min-height:170px}.intro-content h1{font-size:3rem}.intro-features span{font-size:.68rem}}
@media(prefers-reduced-motion:reduce){.section{animation:none}.intro-enter{transition:none}}

/* Ramadan festival refresh: saturated coral, turquoise, saffron and plum accents inspired by the supplied references. */
:root{
  --night:#1d1741;--pine:#113f46;--forest:#087f78;--gold:#f5b542;--gold-light:#ffe4a3;
  --paper:#fff6df;--ink:#263050;--coral:#f05b4f;--orange:#f39a2e;--turquoise:#16a6a0;--berry:#9b345f;--indigo:#393477
}
body{
  background:
    radial-gradient(circle at 7% 4%,#f5a83d55 0 7%,transparent 22%),
    radial-gradient(circle at 95% 18%,#ef5a7040 0 8%,transparent 24%),
    radial-gradient(circle at 84% 88%,#16a6a033 0 10%,transparent 28%),
    linear-gradient(145deg,#201845 0%,#123e49 45%,#087c79 100%);
}
body:before{opacity:.16;background-image:radial-gradient(#ffd36e 1.5px,transparent 1.5px),linear-gradient(35deg,#ffffff11 1px,transparent 1px);background-size:28px 28px,56px 56px}
.top{
  background:
    radial-gradient(circle at 12% 84%,#f39a2e50 0 9%,transparent 28%),
    radial-gradient(circle at 82% 12%,#f05b4f42 0 12%,transparent 30%),
    linear-gradient(125deg,#211745 0%,#174b54 55%,#07817d 100%);
  border-color:#f6c35f;box-shadow:inset 0 0 0 7px #ffffff0b,inset 0 0 0 8px #f6c35f66,0 24px 55px #050b2d66;
}
.top:after{content:'✦  ☾  ✦  ✧  ✦';color:#ffd56d99;letter-spacing:15px}
.top h1{color:#fff6cf;text-shadow:0 3px 22px #f39a2e45}
.top .passport{color:#f9d778}
.top-brand .brand-slot{border-color:#f6c35f;background:#1b4251}
.edition{color:#ffd989;border-color:#f6c35f80}
.nav{border-color:#f6c35f99;background:#201845e8;box-shadow:0 12px 30px #050b2d55}
.nav button{color:#fff2d1;transition:transform .2s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease}
.nav button:before{display:inline-block;margin-inline-end:7px;font-size:1.05em;vertical-align:-1px;opacity:.9}
.nav button:nth-child(1):before{content:'⌂'}.nav button:nth-child(2):before{content:'۞'}.nav button:nth-child(3):before{content:'✧'}.nav button:nth-child(4):before{content:'❖'}.nav button:nth-child(5):before{content:'☼'}.nav button:nth-child(6):before{content:'☾'}.nav button:nth-child(7):before{content:'✦'}.nav button:nth-child(8):before{content:'⚙'}
.nav button:hover{background:#f05b4f2b;border-color:#ffcc6a;transform:translateY(-2px)}
.nav button.active{background:linear-gradient(135deg,#ffd66f 0%,#f39a2e 52%,#f05b4f 100%);border-color:#ffe9a9;box-shadow:0 5px 16px #f39a2e55, inset 0 1px #fff7c4;color:#24153d;transform:translateY(-1px)}
.product-strip{background:linear-gradient(90deg,#0d6b72,#23204f 55%,#8e2d59);border-color:#ffd06d;box-shadow:0 12px 28px #050b2d55}
.strip-heading{background:linear-gradient(160deg,#f05b4f,#be3d61);border-color:#ffd06d;color:#fff4d6}
.product-item{background:linear-gradient(135deg,#fff8e6,#ffe9c5);border-color:#ffbd51;color:#2a2851;transition:transform .2s ease,box-shadow .2s ease}
.product-item:hover{transform:translateY(-4px) rotate(-1deg);box-shadow:0 8px 18px #050b2d44}
.product-item:nth-child(3n+2){background:linear-gradient(135deg,#ddf5ed,#c1eee1);border-color:#57c6ae}
.product-item:nth-child(3n){background:linear-gradient(135deg,#f6def0,#ead2ed);border-color:#c279b2}
.product-copy strong{color:#9b345f}.product-item:nth-child(3n+2) .product-copy strong{color:#087f78}.product-item:nth-child(3n) .product-copy strong{color:#393477}
.competition-bar{background:linear-gradient(120deg,#9b345f,#47306f 55%,#193f58);border-color:#ffd06d;box-shadow:0 11px 26px #050b2d55}
.leader-item{background:#fff2d71a;border-color:#ffd77c80;transition:transform .2s ease,background .2s ease}.leader-item:hover{transform:translateY(-3px);background:#fff2d72b}
.install-card{background:linear-gradient(125deg,#fff6d8,#ffe1ad 48%,#ffd2bf);border-color:#f4b548}
.card{background:linear-gradient(135deg,#fff9e9,#fff0d2);border-color:#f3c778;box-shadow:0 14px 32px #050b2d33,inset 0 0 0 3px #fffdf5;transition:transform .22s ease,box-shadow .22s ease}
.card:hover{transform:translateY(-3px);box-shadow:0 18px 38px #050b2d44,inset 0 0 0 3px #fffdf5}
.card:after{height:4px;background:linear-gradient(90deg,#16a6a0,#f39a2e,#f05b4f,#9b345f)}
.cards3 .card:nth-child(4n+1):after{background:linear-gradient(90deg,#16a6a0,#74d5b6)}
.cards3 .card:nth-child(4n+2):after{background:linear-gradient(90deg,#f39a2e,#ffd36e)}
.cards3 .card:nth-child(4n+3):after{background:linear-gradient(90deg,#f05b4f,#f6a4a1)}
.cards3 .card:nth-child(4n):after{background:linear-gradient(90deg,#9b345f,#d982b6)}
.card h2,.card h3{color:#393477}.card h2:before,.card h3:before{color:#f05b4f}
.btn{background:linear-gradient(135deg,#0e8f83,#116b72);box-shadow:0 4px 0 #084d59,0 8px 16px #0b465333;transition:transform .18s ease,filter .18s ease,box-shadow .18s ease}
.btn:hover{filter:brightness(1.08);transform:translateY(-2px);box-shadow:0 6px 0 #084d59,0 12px 20px #0b465344}
.btn:active{transform:translateY(2px);box-shadow:0 2px 0 #084d59}
.btn.secondary{background:#e7f3eb;color:#145c5b;border-color:#79c7b2}.btn.goldbtn{background:linear-gradient(135deg,#ffd86b,#f39a2e,#f05b4f);color:#24153d;box-shadow:0 4px 0 #b55b3c}
.pill{background:#e1f4e7;color:#0c756d;border-color:#78cdb4}
.prayer{border-color:#e8c77f;transition:transform .18s ease,background .18s ease}.prayer:hover{transform:translateY(-3px);background:#fff1cf}.prayer:before{display:block;font-size:1.25rem;margin-bottom:3px;color:#f05b4f}.prayer:nth-child(1):before{content:'✦'}.prayer:nth-child(2):before{content:'☀'}.prayer:nth-child(3):before{content:'◈'}.prayer:nth-child(4):before{content:'✧'}.prayer:nth-child(5):before{content:'☾'}.prayer:nth-child(6):before{content:'★'}
.progress span{background:linear-gradient(90deg,#16a6a0,#f39a2e,#f05b4f)}
.choice{border-color:#edc777}.choice:hover{background:#fff0d0;transform:translateX(-2px)}
.worship-choice{border-color:#dfc37e;transition:transform .18s ease,background .18s ease}.worship-choice:hover{transform:translateX(-3px);background:#fff0d0}.worship-choice.checked{background:linear-gradient(90deg,#dcf3e8,#fff0cf);border-color:#57b99a}
.dhikr-option{background:#e7f3eb;border-color:#85cdbb;transition:transform .18s ease,filter .18s ease}.dhikr-option:hover{transform:translateY(-3px);filter:brightness(1.03)}.dhikr-option:nth-child(2){background:#fff0d0;border-color:#f0c56d}.dhikr-option:nth-child(3){background:#f6def0;border-color:#ce8cb9}.dhikr-option:nth-child(4){background:#e4e2f4;border-color:#9c99d2}.dhikr-option.active{background:linear-gradient(135deg,#ffd66f,#f39a2e);border-color:#f05b4f;color:#24153d;box-shadow:0 5px 14px #f39a2e44}
.tasbih-tap{background:radial-gradient(circle at 35% 28%,#ff9864 0,#f05b4f 38%,#9b345f 72%,#393477 100%);border-color:#ffd36e;box-shadow:0 12px 0 #69314e,0 23px 30px #22133f55;transition:transform .18s ease,filter .18s ease}.tasbih-tap:hover{filter:saturate(1.15) brightness(1.06)}.tasbih-tap:active{box-shadow:0 8px 0 #69314e,0 15px 24px #22133f55}
.tasbih-breakdown>div{border-color:#e7c67d}.tasbih-breakdown>div:nth-child(2){background:#fff0d0}.tasbih-breakdown>div:nth-child(3){background:#f6def0}.tasbih-breakdown>div:nth-child(4){background:#e4e2f4}
.intro-screen{background:radial-gradient(circle at 77% 35%,#f39a2e55 0 8%,transparent 26%),radial-gradient(circle at 72% 80%,#f05b4f44 0 9%,transparent 30%),linear-gradient(135deg,#211745 0%,#123f4b 54%,#07817d 100%)}
.intro-screen:before{border-color:#ffd36e99;background:linear-gradient(125deg,transparent 0 62%,#f39a2e14 62% 72%,transparent 72%)}.intro-screen:after{border-color:#f05b4f66}
.intro-kicker,.intro-eyebrow{color:#ffd36e}.intro-content h1{color:#fff3ca;text-shadow:0 4px 25px #f39a2e55}.intro-content h1 em{color:#ff9a73}.intro-content p{color:#fff0dd}
.intro-features span{background:#fff2d71c;border-color:#ffd36e99;color:#fff0c2;transition:transform .18s ease,background .18s ease}.intro-features span:hover{transform:translateY(-3px);background:#f05b4f44}.intro-features span:nth-child(2){border-color:#65d1bb}.intro-features span:nth-child(3){border-color:#e999c0}
.intro-enter{background:linear-gradient(135deg,#ffd76b,#f39a2e 55%,#f05b4f);color:#24153d;box-shadow:0 5px 0 #a74c45,0 14px 26px #050b2d55;transition:transform .18s ease,filter .18s ease}.intro-enter:hover{filter:brightness(1.08);transform:translateY(-3px)}.intro-enter:active{transform:translateY(1px)}
.intro-art:before{background:#f39a2e55}
.footer{color:#ffe1a2}
@media(max-width:600px){.nav button:before{margin-inline-end:4px}.card:hover{transform:none}.top{background-position:57% center}}

/* Festive Ramadan hero: remove the book artwork and use a light decorative scene instead. */
.top-cover{display:none}
.top:before{display:grid;place-items:center;content:'☾';position:absolute;inset:auto 8% 14% auto;width:230px;height:230px;border:1px solid #ffd36e55;border-radius:50%;font-size:184px;line-height:1;color:#ffd36e;opacity:.22;transform:rotate(-12deg);background:radial-gradient(circle,#f39a2e22 0 35%,transparent 70%);z-index:0}
.top:after{content:'✦  ✧  ✦  ☼  ✦';position:absolute;left:11%;bottom:18%;color:#ffd36ecc;font-size:22px;letter-spacing:15px;z-index:0}
.top-decor{position:absolute;right:6%;bottom:11%;width:370px;height:210px;pointer-events:none;z-index:1;opacity:.92}
.top-decor:before{content:'';position:absolute;inset:14px 22px 8px;border-radius:50%;background:radial-gradient(circle,#f39a2e38,transparent 67%);filter:blur(4px)}
.top-decor:after{content:'رمضان كريم';position:absolute;right:32px;bottom:4px;color:#ffe6a4;font-family:Amiri,Cairo,serif;font-size:1.3rem;letter-spacing:.04em}
.top-moon{position:absolute;right:132px;top:14px;color:#ffd36e;font-size:7rem;line-height:.8;text-shadow:0 0 22px #f39a2e88;transform:rotate(-18deg)}
.top-star{position:absolute;color:#fff0b4;text-shadow:0 0 12px #ffd36ecc}.top-star.star-one{right:52px;top:32px;font-size:2.1rem}.top-star.star-two{right:248px;top:6px;font-size:1.5rem}
.top-lantern{position:absolute;width:39px;height:56px;border:3px solid #f39a2e;border-radius:11px 11px 16px 16px;background:linear-gradient(160deg,#f05b4f,#9b345f);color:#ffe0a0;font-size:1.2rem;text-align:center;line-height:2.4;box-shadow:0 0 18px #f05b4f55}.top-lantern:before{content:'';position:absolute;left:50%;top:-28px;width:1px;height:28px;background:#ffd36e}.top-lantern.lantern-one{right:16px;top:90px;transform:rotate(7deg)}.top-lantern.lantern-two{right:218px;top:74px;background:linear-gradient(160deg,#16a6a0,#087f78);transform:rotate(-7deg)}.top-garland{position:absolute;right:24px;top:76px;color:#ffd36e;letter-spacing:13px;font-size:1rem}
.intro-art img{display:none}
.intro-art:after{content:'☾\A\A  ✦   ✧   ✦\A\A  ◇    ◈    ◇\A\A رمضان كريم';white-space:pre;text-align:center;display:grid;place-items:center;position:relative;width:min(92%,540px);height:min(64vh,430px);border:1px solid #ffd36eaa;border-radius:44% 44% 24% 24%;background:radial-gradient(circle at 50% 38%,#f39a2e66 0 9%,transparent 10%),linear-gradient(145deg,#9b345f88,#39347799 48%,#087f7899);box-shadow:inset 0 0 0 8px #ffffff0a,0 26px 40px #050b2d66;color:#ffe9ad;font-family:Amiri,Cairo,serif;font-size:clamp(2.5rem,5vw,5rem);line-height:.86;letter-spacing:.07em;transform:rotate(-3deg)}
@media(max-width:850px){.top-decor{right:2%;bottom:9%;width:300px;transform:scale(.86);transform-origin:right bottom}.top:before{right:-4%;bottom:9%}}
@media(max-width:600px){.top-decor{right:-12%;bottom:5%;transform:scale(.62);opacity:.76}.top:before{right:-21%;bottom:4%;opacity:.16}.intro-art:after{height:min(32vh,260px);font-size:clamp(2rem,10vw,3.6rem)}}

.audio-mode{min-width:175px}.audio-mode span{font-size:.8rem;color:#6b5b36}.audio-status{margin:14px 0 4px;background:linear-gradient(90deg,#e4f4e9,#fff0d2);border-color:#e1be67;color:#315e54}.quran-layout .row .btn{white-space:nowrap}.quran-layout #audio{accent-color:#9b345f;border-radius:14px;background:#fff8e8}.quran-layout audio::-webkit-media-controls-panel{background:#ffe5b4}@media(max-width:750px){.quran-layout .row{align-items:stretch}.audio-mode{width:100%}.quran-layout .row .btn{flex:1}.top-decor{pointer-events:none}}

/* The Uthmani edition is Unicode text; use a Unicode Quran-capable face, never a glyph-mapped Mushaf font with another edition. */
.quran-layout .ayah{font-family:Amiri,'Traditional Arabic',serif;font-size:clamp(1.8rem,3vw,2.2rem);line-height:2.25;letter-spacing:0;word-spacing:normal;direction:rtl;text-align:right;overflow-wrap:normal}
.quran-layout .ayah .num{font-family:Cairo,Arial,sans-serif;font-size:.75rem;vertical-align:middle}
@media(max-width:750px){.quran-layout .ayah{font-size:1.8rem;line-height:2.45}}