:root{--deep:#0a3b37;--primary:#14635c;--mid:#2f8c80;--gold:#c6923e;--soft:#e7d6b4;--mint:#e4f0ec;--pale:#f1f7f4;--paper:#fbfcfa;--ink:#0f2320;--muted:#526d63;--line:#dce8df;--scale:1;color-scheme:light only}*{box-sizing:border-box}html,body{background:var(--paper);height:100%;min-height:100%;color:var(--ink);margin:0;font-family:Plus Jakarta Sans,sans-serif}html{color-scheme:light only}button,a,input,select{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{font:inherit;cursor:pointer;color:inherit;border:0}a{color:var(--primary);text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--gold);outline-offset:3px}.shell{background:var(--paper);flex-direction:column;max-width:560px;height:100dvh;min-height:100dvh;margin:0 auto;display:flex}#app{scrollbar-width:none;font-size:calc(16px * var(--scale));scroll-behavior:smooth;flex:1;min-height:0;overflow-y:auto}#app::-webkit-scrollbar{display:none}.page{padding:22px 23px 25px;animation:.25s appear}.topline{justify-content:space-between;align-items:center;gap:12px;margin-bottom:24px;display:flex}.brand{color:var(--primary);align-items:center;gap:9px;font-size:22px;font-weight:800;text-decoration:none;display:flex}.brand-logo{width:auto;height:48px;display:block}.splash-logo{width:min(240px,72vw);height:auto;margin:18px auto 8px;display:block}.icon-button{background:0 0;border:1px solid #dbe6de;border-radius:50%;flex-shrink:0;width:46px;height:46px;font-size:21px}.greeting{color:#547067;margin:0 0 5px;font-size:.87em}.page h2,.intro h2{letter-spacing:-.8px;margin:4px 0 16px;font-size:1.6em;font-weight:600;line-height:1.3}.sub{color:var(--muted);margin:0 0 20px;font-size:.9em;line-height:1.7}.prayer{background:var(--deep);color:#fff;border-radius:22px;padding:21px;position:relative;overflow:hidden}.prayer .zone{color:#c9dfd5;font-size:.75em}.prayer .prayer-row{justify-content:space-between;align-items:end;margin:17px 0;display:flex}.prayer h3{margin:0 0 4px;font-size:1.65em}.prayer .time{font-size:1.7em;font-weight:600}.prayer small{color:#cde3da;font-size:.75em}.countdown{border-top:1px solid #ffffff24;justify-content:space-between;padding-top:13px;font-size:.8em;display:flex}.demo{background:#ffffff19;border-radius:5px;margin-left:4px;padding:3px 6px;font-size:.68em}.primary{background:var(--primary);color:#fff;text-align:center;border-radius:15px;width:100%;min-height:56px;padding:17px 20px;font-size:1em;font-weight:700;display:block}.help{text-align:left;background:var(--mint);color:var(--deep);border:1px solid #bdd7ca;align-items:center;gap:14px;margin-top:15px;display:flex}.help b{font-size:1.02em;line-height:1.5;display:block}.help small{color:#527469;margin-top:4px;font-size:.73em;font-weight:500;display:block}.help .help-icon{color:var(--primary);font-size:27px}.arrow{margin-left:auto}.section-head{justify-content:space-between;align-items:center;margin:24px 0 13px;display:flex}.section-head h3{margin:0;font-size:1em}.section-head span{color:#5b746a;font-size:.73em}.checklist{gap:7px;display:flex}.check{text-align:center;background:#fff;border:1px solid #dce8e0;border-radius:13px;flex:1;min-height:72px;padding:12px 2px;font-size:.7em}.check i{color:#0000;border:1px solid #c2d4cb;border-radius:50%;width:22px;height:22px;margin:0 auto 7px;font-style:normal;line-height:20px;display:block}.check.done{background:var(--pale);border-color:#bcd2c6}.check.done i{background:var(--primary);color:#fff;border-color:var(--primary)}.modules{grid-template-columns:repeat(3,1fr);gap:9px;display:grid}.module{background:0 0;border:1px solid #d9e6dd;border-radius:15px;min-height:88px;padding:12px 3px;font-size:.73em;line-height:1.5}.module .symbol{color:var(--primary);margin-bottom:6px;font-size:24px;display:block}.dua{background:#f6f1e6;border-radius:18px;margin-top:19px;padding:18px}.dua h3{color:#75541f;margin:0 0 10px;font-size:.83em}.dua p{color:#6a644f;margin:0;font-size:.85em;line-height:1.7}.bottom{background:#fbfcfaf5;border-top:1px solid #dfe8e1;flex-shrink:0;padding:9px 9px 10px;display:flex}.bottom[hidden]{display:none!important}.bottom button{color:#657d73;background:0 0;border-radius:12px;width:25%;min-height:57px;font-size:12px}.bottom .symbol{margin-bottom:3px;font-size:23px;display:block}.bottom button.active{color:var(--primary);background:var(--mint);font-weight:800}.intro{text-align:center;flex-direction:column;min-height:100%;padding:30px 27px;display:flex}.intro h2{letter-spacing:-.8px;font-size:1.8em;line-height:1.35}.intro .arabic{color:var(--primary);margin:8px 0 0;font-family:Amiri,Georgia,serif;font-size:1.65em;line-height:1.9}.intro .sub{margin-bottom:30px}.intro .primary{margin-top:auto}.intro-visual{background:var(--mint);height:210px;color:var(--primary);border:1px solid #c8ddd0;border-radius:110px 110px 30px 30px;place-items:center;margin:35px 25px 15px;font-size:85px;display:grid}.dots{justify-content:center;gap:7px;margin:20px;display:flex}.dots button{background:#c1d5c9;border-radius:9px;width:8px;height:8px;min-height:8px;padding:0}.dots button.selected{background:var(--primary);width:26px}.skip{color:#60786c;background:0 0;align-self:end;min-height:44px;font-size:.84em}.step-track{gap:5px;margin:18px 0;display:flex}.step-track span{background:#dbe7de;border-radius:4px;flex:1;height:4px}.step-track span.on{background:var(--primary)}.art{background:var(--mint);border-radius:18px;margin:15px 0;position:relative;overflow:hidden}.art img{width:100%;display:block}.art .artlabel{color:var(--primary);justify-content:space-between;padding:11px 14px;font-size:.73em;display:flex}.step-card{border:1px solid var(--line);background:#fff;border-radius:18px;margin:16px 0;padding:20px}.step-card .number{background:var(--mint);color:var(--primary);border-radius:50%;place-items:center;width:30px;height:30px;font-size:.8em;display:grid}.step-card h3{font-size:1.12em;line-height:1.4}.step-card p{color:#607267;font-size:.87em;line-height:1.7}.audio{background:var(--pale);text-align:left;border-radius:14px;align-items:center;gap:13px;width:100%;min-height:64px;margin:18px 0;padding:13px;font-size:.8em;display:flex}.play-icon{background:var(--primary);color:#fff;border-radius:50%;flex-shrink:0;place-items:center;width:36px;height:36px;display:grid}.audio.playing{box-shadow:inset 0 0 0 1px var(--mid)}.audio small{color:#5d776c;margin-top:5px;font-size:.8em;display:block}.row{gap:10px;display:flex}.row .outline{flex:1}.row .primary{flex:2}.switch-row{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:20px;padding:18px 0;font-size:.92em;line-height:1.5;display:flex}.switch-row input{accent-color:var(--primary);width:23px;height:23px}.switch-row small{color:#657e71;font-size:.8em;display:block}.segmented{background:var(--mint);border-radius:13px;gap:4px;margin:20px 0;padding:4px;display:flex}.segmented button{background:0 0;border-radius:10px;flex:1;padding:13px 7px;font-size:.8em}.segmented button.selected{color:var(--primary);background:#fff;font-weight:700;box-shadow:0 3px 8px #173f3210}.grid-two{grid-template-columns:1fr 1fr;gap:10px;display:grid}.grid-two .option{min-height:120px;margin:0;display:block}.grid-two .symbol{margin-bottom:12px}.compass{width:240px;height:240px;box-shadow:inset 0 0 0 15px var(--paper);background:repeating-conic-gradient(#bfd0c3 0deg 1deg,#0000 1deg 30deg);border:2px solid #b7cfbf;border-radius:50%;justify-content:center;align-items:center;margin:25px auto;display:flex;position:relative}.compass:before{content:"U";color:var(--primary);font-size:14px;position:absolute;top:22px}.compass b{color:var(--primary);font-size:85px;display:block;transform:rotate(-68deg)}details{border-bottom:1px solid #d7e4da;padding:18px 0;font-size:.9em;line-height:1.7}summary{cursor:pointer;min-height:36px;font-weight:600}details p{color:#607368}#toast{background:var(--deep);color:#fff;z-index:20;border-radius:15px;max-width:min(90%,480px);padding:15px 22px;font-size:14px;display:none;position:fixed;bottom:30px;left:50%;transform:translate(-50%);box-shadow:0 10px 30px #0002}body.high{--paper:#fff;--pale:#e3f0e8;--ink:#000;--primary:#053a31}body.high .sub,body.high small{color:#283d31}.timer{text-align:center;color:var(--primary);margin:25px 0;font-size:3.3em;font-weight:700}.muted{color:#637a6e;font-size:.8em}.full-width{width:100%;margin-top:12px}select{font:inherit;width:100%;color:var(--primary);background:#fff;border:1px solid #b9cec0;border-radius:12px;padding:16px}label{margin:8px 0;font-size:.85em;font-weight:700;display:block}input[type=range]{width:100%;accent-color:var(--primary);min-height:44px}.back{min-height:44px;color:var(--primary);text-align:left;background:0 0;padding:0;font-size:.84em}.header{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.pill{background:var(--mint);color:var(--primary);border-radius:20px;padding:6px 9px;font-size:.7em}.option{text-align:left;background:#fff;border:1px solid #d8e6dd;border-radius:16px;align-items:center;gap:14px;width:100%;min-height:76px;margin:10px 0;padding:17px 15px;display:flex}.option .symbol{background:var(--pale);color:var(--primary);border-radius:12px;flex-shrink:0;place-items:center;width:43px;height:43px;font-size:23px;display:grid}.option strong{font-size:1em}.option small{color:#5b7469;margin-top:5px;font-size:.76em;font-weight:400;line-height:1.5;display:block}.notice{border-left:3px solid var(--gold);color:#6d5936;background:#f5f0e5;border-radius:0 12px 12px 0;margin:20px 0;padding:14px 15px;font-size:.8em;line-height:1.7}.outline{min-height:48px;color:var(--primary);background:0 0;border:1px solid #a8c0b4;border-radius:12px;padding:14px 18px;font-size:14px}@keyframes appear{0%{opacity:.4;transform:translateY(5px)}to{opacity:1;transform:none}}@media (width<=690px){.page{padding-top:22px}.intro{padding-top:30px}.bottom button{font-size:14px}}@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important}}