/* 3.memoryquran.com shared look: night ink and gold, Alegreya for English, Amiri for Arabic phrases, Scheherazade New for full ayahs. */
:root{
  --night:#2B2140; --paper:#F4F6F8; --palm:#2F5D50; --gold:#C89B3C; --gold-deep:#8C6A1F; --gold-soft:#E9D7AE; --mist:#DCE1EA;
  --ink:#1F2733; --muted:#5E6878; --on-night:#E8ECF5; --on-night-muted:#A9B3CC; --card:#fff;
  --serif:"Alegreya",Georgia,serif; --sans:"Alegreya Sans",system-ui,sans-serif; --ar:"Amiri","Scheherazade New",serif; --ar-text:"Scheherazade New","Amiri",serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink)}
html{scroll-behavior:smooth}
body{font-family:var(--sans);font-size:17px;line-height:1.55}
a{color:inherit}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}
.inner{max-width:760px;margin:0 auto;padding:0 20px}
.sky{background:var(--night);color:var(--on-night)}
.topbar{display:flex;align-items:center;gap:14px;height:52px}
.topbar .sp{flex:1}
.brand{font-weight:800;text-decoration:none;color:var(--on-night-muted)}
.brand b{color:var(--on-night)}
.toplink{text-decoration:none;font-weight:700;color:var(--on-night-muted)}
.toplink:hover{color:var(--on-night)}
.head{padding:22px 0 26px}
.head .kicker{color:var(--on-night-muted);font-size:.92rem;margin:0}
.head h1{font-family:var(--serif);font-weight:700;font-size:clamp(1.7rem,6vw,2.4rem);line-height:1.15;margin:4px 0 0}
.head .phrase{font-family:var(--ar);font-size:clamp(1.7rem,7vw,2.5rem);line-height:1.7;color:var(--gold-soft);direction:rtl;margin:14px 0 0}
.head .phrase small{font-family:var(--sans);font-size:.85rem;color:var(--on-night-muted);direction:ltr;unicode-bidi:isolate;margin-right:8px}
.head .about{color:var(--on-night-muted);max-width:56ch;margin:10px 0 0}
/* ribbon of the 200 ayahs, ayah 1 on the right */
.ribbon{margin:22px 0 0}
.ribbon svg{display:block;width:100%;height:40px;overflow:visible}
.ribbon rect{transition:opacity .25s}
.ribbon .off{opacity:.18}
.ribbon .ends{display:flex;justify-content:space-between;color:var(--on-night-muted);font-size:.78rem;margin-top:4px}
/* mind map */
.mm{position:relative;width:100%;margin:26px auto 0;min-height:200px}
.mm-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.mm-lines path{fill:none;stroke:var(--ink)!important;stroke-width:1.2;opacity:.28}
.mm-lines path.trunk{opacity:.18;stroke-width:1.2}
.mm-centre{position:absolute;z-index:1}
.mm-centre.circle{width:132px;height:132px;border-radius:50%;background:var(--night);color:var(--on-night);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.mm-centre.circle .ar{font-family:var(--ar);font-size:1.9rem;line-height:1.3;color:var(--gold-soft)}
.mm-centre.circle .num{font-family:var(--serif);font-weight:700;font-size:2.4rem;line-height:1;color:var(--gold-soft)}
.mm-centre.circle small{font-size:.8rem;color:var(--on-night-muted)}
.mm-node{position:absolute;z-index:2;box-sizing:border-box;display:flex;flex-direction:column;gap:2px;text-decoration:none;color:var(--ink);background:var(--card);border:1px solid var(--mist);border-radius:10px;padding:12px 14px;transition:border-color .2s}
.mm-node:hover{border-color:var(--gold)}
.mm-node .ph{font-family:var(--ar);font-size:1.15rem;line-height:1.75;color:var(--gold-deep);direction:rtl;text-align:right}
.mm-node b{font-family:var(--serif);font-weight:500;font-size:1.05rem;line-height:1.25}
.mm-node b .n{font-weight:700;color:var(--gold-deep);margin-right:6px}
.mm-node small{font-size:.82rem;color:var(--muted)}
.mm-node .r{font-size:.82rem;font-weight:700;color:var(--gold-deep)}
.mm.grow .mm-centre{animation:mmfade .5s ease-out both}
.mm.grow .mm-node{animation:mmfade .45s ease-out both;animation-delay:calc(.35s + var(--i) * .06s)}
.mm.grow .mm-lines path.br{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:mmdraw .5s ease-out forwards;animation-delay:calc(.2s + var(--i) * .06s)}
.mm.grow .mm-lines path.trunk{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:mmdraw 1s ease-out .1s forwards}
@keyframes mmfade{from{opacity:0}to{opacity:1}}
@keyframes mmdraw{to{stroke-dashoffset:0}}
/* background notes */
.bgi{padding:12px 0 12px 16px;border-left:2px solid var(--mist);margin-top:12px}
.bgi .tag{font-size:.85rem;font-weight:800}
.bgi.kH .tag{color:var(--palm)}
.bgi.kA .tag{color:var(--gold-deep)}
.bgi.kT .tag{color:#3D4F7A}
.bgi.kH{border-left-color:#B9CFC7}.bgi.kA{border-left-color:var(--gold-soft)}.bgi.kT{border-left-color:#C9D2E6}
.bgi .ref{float:right;font-size:.82rem;font-weight:700;color:var(--muted);text-decoration:none}
.bgi .ref:hover{color:var(--ink)}
.bgi p{margin:4px 0 0;color:var(--ink)}
.bgi .src{margin:6px 0 0;font-size:.86rem;color:var(--muted)}
.sun{color:var(--palm);font-weight:700;text-underline-offset:3px;text-decoration-thickness:1px}
.sun:hover{text-decoration-thickness:2px}
.book{font-style:italic}
.saying .sun{font-family:var(--sans)}
.bgi small{color:var(--muted);font-style:italic;font-size:.88rem}
.saying{margin:34px 0 0;padding:4px 0 4px 20px;border-left:3px solid var(--gold)}
.saying p{margin:0 0 12px;font-family:var(--serif);font-size:1.08rem;line-height:1.6}
.saying small{color:var(--muted);font-family:var(--sans);font-size:.85rem}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}