:root{--font-sans: "Rubik", system-ui, -apple-system, sans-serif;--font-quran: "KFGQPC Hafs V20";--surface-1: #fafafa;--surface-2: #fff;--text-1: #1a1a1a;--text-2: #666;--text-3: #999;--brand: #10b981;--brand-light: #d1fae5;--border: #e5e7eb;--shadow: 0 1px 3px rgba(0, 0, 0, .1)}@font-face{font-family:Rubik;src:url(../../../fonts/Rubik-VariableFont_wght.ttf) format("truetype");font-weight:400 700;font-display:swap}@font-face{font-family:KFGQPC Hafs V20;src:url(../../../fonts/uthmanic_hafs_v20.ttf) format("truetype");font-display:swap}*{box-sizing:border-box}body{margin:0;font-family:var(--font-sans);background-color:var(--surface-1);color:var(--text-1);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.container{max-width:800px;margin:0 auto;padding:3rem 1.5rem}@media(min-width:768px){.container{padding:4rem 2rem}}.arabic{font-family:var(--font-quran);direction:rtl;text-align:right;line-height:2.2;font-size:1.75rem}header{text-align:center;margin-bottom:3rem}h1{font-size:2.5rem;font-weight:500;margin:0 0 .5rem;color:var(--text-1)}h1 small{display:block;font-size:1.5rem;color:var(--text-2);margin-top:.5rem}header p{font-size:1.05rem;color:var(--text-2);margin:0}.instructions{margin-top:4rem;padding:2rem;background:var(--surface-2);border-radius:12px;box-shadow:var(--shadow)}.instructions h2{font-size:1.5rem;font-weight:500;margin:0 0 1.5rem}.instructions ol{margin:0 0 2rem;padding-inline-start:1.5rem;line-height:1.8}.instructions ol li{margin-bottom:.75rem}.instructions ol code{background:var(--surface-1);padding:.15rem .4rem;border-radius:4px;font-family:SF Mono,Monaco,monospace;font-size:.9em}.instructions .download{display:inline-block;padding:.75rem 1.5rem;background:var(--brand);color:#fff;text-decoration:none;border-radius:8px;font-weight:500;transition:all .2s}.instructions .download:hover{background:#059669;transform:translateY(-1px);box-shadow:0 4px 12px #10b9814d}.instructions[dir=rtl]{text-align:right}.lang-switcher{position:fixed;top:1.5rem;right:1.5rem;padding:.5rem 1rem;background:var(--surface-2);border:2px solid var(--border);border-radius:8px;font-family:var(--font-sans);font-weight:500;font-size:.9rem;color:var(--text-1);cursor:pointer;transition:all .2s;z-index:100}.lang-switcher:hover{border-color:var(--brand);background:var(--brand-light)}.footer{margin-top:4rem;padding-top:2rem;border-top:1px solid var(--border);text-align:center;color:var(--text-3);font-size:.9rem}.footer p{margin:.5rem 0}.footer .url{font-weight:500;color:var(--text-2)}
