@font-face{font-family:Arabic;src:url('assets/arabic-regular.ttf') format('truetype');font-weight:400;font-display:swap}@font-face{font-family:Arabic;src:url('assets/arabic-bold.ttf') format('truetype');font-weight:700;font-display:swap}
:root{color-scheme:dark;--yellow:#ffdf06;--blue:#234697}*{box-sizing:border-box}body{margin:0;color:#fff;background:#234697;font-family:Arabic,Tahoma,sans-serif;background-image:radial-gradient(ellipse at 90% 8%,#4374cf 0,transparent 44%),radial-gradient(ellipse at 0 42%,#3767b8 0,transparent 48%),linear-gradient(145deg,#123578,#234697 60%,#0a2b6d);min-height:100vh}body:before,body:after{content:"";position:fixed;z-index:-1;border-radius:50%;background:#ffdf06;filter:blur(16px);pointer-events:none;opacity:.7}body:before{width:160px;height:160px;top:170px;right:-95px}body:after{width:90px;height:90px;left:-62px;bottom:15%}main{max-width:1000px;margin:auto;padding:36px 28px 60px}h1{text-align:center;font-size:clamp(2.1rem,6vw,4.3rem);line-height:1.7;margin:0 0 25px;font-weight:700;text-shadow:0 2px 22px #b1d1ff40}h1:after{content:"";display:block;background:var(--yellow);height:4px;width:48px;border-radius:9px;margin:6px auto 0}.glass{background:linear-gradient(125deg,#b1d4ff33,#669ee51a 52%,#88b5fd30);border:1px solid #aed0ff73;box-shadow:inset 0 1px 9px #d2e8ff40,0 14px 38px #00194333;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border-radius:25px}.image-card{padding:10px;overflow:hidden;max-width:790px;margin:0 auto 22px}.image-card img{display:block;width:100%;height:auto;border-radius:17px}.player{padding:24px 28px;margin:0 0 24px}.custom{display:flex;align-items:center;gap:24px;direction:ltr}[hidden]{display:none!important}audio{width:100%}button,input{font:inherit}button{cursor:pointer;border:1px solid #a4c6ff70;color:white;min-height:44px}button:focus-visible,input:focus-visible{outline:3px solid var(--yellow);outline-offset:6px}.play{flex-shrink:0;display:grid;place-items:center;border:0;background:var(--yellow);width:72px;height:72px;border-radius:50%;box-shadow:0 0 24px #ffdf0630}.play svg{width:29px;height:29px;fill:#163a88}.track{min-width:0;flex:1}.wave{height:54px;margin-bottom:8px}.wave svg{width:100%;height:100%;display:block}.timeline{display:flex;align-items:center;gap:12px;font-family:Arial,sans-serif;font-size:14px;font-variant-numeric:tabular-nums}.timeline input{min-width:0;width:100%;height:24px;accent-color:var(--yellow);cursor:pointer}.speed{background:#90b6ff26;border-radius:22px;min-width:56px;font-family:Arial,sans-serif;font-size:16px}.story{padding:30px 42px}section+section{border-top:1px solid #b1d0ff40;margin-top:30px;padding-top:24px}h2{font-size:1.28rem;line-height:2.1;margin:0 0 16px}h2:before{content:"";display:inline-block;width:19px;height:4px;background:var(--yellow);border-radius:4px;margin-left:12px;vertical-align:middle}p{font-size:1.03rem;line-height:2.35;margin:0 0 18px}p:last-child{margin-bottom:0}.direction{color:#cedfff;font-size:.94em}#error{margin-top:16px;font-size:.9rem}@media(max-width:600px){main{padding:24px 14px 30px}h1{margin-bottom:20px}.glass{border-radius:20px}.image-card{padding:6px;margin-bottom:16px}.image-card img{border-radius:14px}.player{padding:18px 14px;margin-bottom:16px}.custom{gap:12px}.play{width:52px;height:52px}.play svg{width:23px}.speed{min-width:44px}.wave{height:38px}.timeline{font-size:12px;gap:6px}.story{padding:24px 20px}h2{font-size:1.12rem}p{font-size:1rem;line-height:2.25}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

.section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:10px 14px;margin:0 0 20px;border:1px solid #aed0ff73;border-radius:14px;background:#82adf526}
.section-heading h2{margin:0;font-size:1.1rem;line-height:1.8}
.section-heading h2:before{display:none}
.download{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:6px 14px;border:1px solid #ffdf0680;border-radius:12px;background:#ffdf061a;color:#ffed70;text-decoration:none;font-size:.9rem;white-space:nowrap}
.download:hover{background:#ffdf062e}
.download:focus-visible{outline:3px solid #ffdf06;outline-offset:3px}
.image-download{margin-top:10px}
/* Desktop: fixed framed image, with audio and narrative sharing the top alignment. */
@media (min-width:1024px){
  body{height:auto;overflow:visible}
  main{display:block;width:50%;max-width:none;margin:0 50% 0 0;padding:24px 8px 24px 16px}
  .media-column{display:contents}
  .media-column h1{display:none}
  .media-column h1:after{margin-top:7px}
  .media-column .image-card{position:fixed;top:24px;right:16px;width:calc(50% - 24px);max-width:none;height:calc(100vh - 48px);height:calc(100dvh - 48px);margin:0;padding:10px;display:flex;flex-direction:column;overflow:hidden}
  .media-column .image-card img{display:block;width:100%;max-width:none;height:0;min-height:0;flex:1;object-fit:contain;object-position:center top;border-radius:17px}
  .image-download{flex:none;align-self:flex-end}
  .media-column .player{position:static;width:100%;min-width:0;margin:0 0 20px;padding:18px 20px}
  .media-column .custom{gap:16px}
  .media-column .play{width:56px;height:56px}
  .media-column .wave{height:42px}
  .story{grid-column:2;grid-row:2;min-width:0;overflow:visible;padding:28px 30px}
}