:root{--paper:#f7f5f2;--ink:#161513;--muted:#6e675f;--line:#e6e1d8;--accent:#16382c;--card:#fff}
*{box-sizing:border-box}
html{background:var(--paper);color:var(--ink);font-size:16px}
html[data-size="1"]{font-size:18px}
html[data-size="2"]{font-size:20px}
html[data-size="3"]{font-size:22px}
html,body{max-width:100%;overflow-x:clip}
body{margin:0;font-family:"IBM Plex Sans Arabic",sans-serif;line-height:1.7}
a{color:inherit;text-decoration:none}
.wrap{width:min(40rem,calc(100% - 1.5rem));margin-inline:auto}
header{border-bottom:1px solid var(--line);background:var(--paper);position:sticky;top:0;z-index:10}
.bar{display:flex;align-items:center;gap:1rem;min-height:3.6rem}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:600}
.mark{width:2rem;height:2rem;display:grid;place-items:center;background:var(--accent);color:#fff;border-radius:50%;font-family:Amiri,serif}
h1,.ttl,.who{font-family:Amiri,serif;font-weight:400}
h1{font-size:1.7rem;line-height:1.45;margin:.2rem 0 .4rem;overflow-wrap:anywhere}
.meta{color:var(--muted);margin:.2rem 0 1rem}
.note{color:var(--muted);font-size:.92rem}
.crumbs{display:flex;flex-wrap:wrap;gap:.4rem;color:var(--muted);font-size:.92rem;margin:1rem 0}
.letters{display:grid;grid-template-columns:repeat(auto-fill,minmax(6.5rem,1fr));gap:.5rem;margin:1rem 0 1.5rem}
.letters a{background:var(--card);border:1px solid var(--line);padding:.65rem .75rem;display:flex;justify-content:space-between;align-items:baseline;min-width:0}
.letters b{font-family:Amiri,serif;font-size:1.4rem;font-weight:400}
.letters span{color:var(--muted);font-size:.85rem}
.hits{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.entry{display:flex;flex-direction:column;align-items:stretch;gap:.15rem;padding:.8rem 0;border-bottom:1px solid var(--line);min-width:0}
.entry .ttl{display:block;font-size:1.28rem;line-height:1.55;overflow-wrap:anywhere}
.entry .meta{display:block;margin:0;white-space:normal;font-size:.82rem;line-height:1.45}
.row{display:grid;grid-template-columns:minmax(4.6rem,6.2rem) minmax(0,1fr);gap:.55rem;padding:.55rem 0;border-bottom:1px solid var(--line)}
.row dt{color:var(--muted);font-size:.82rem}
.row dd{margin:0;min-width:0;font-family:Amiri,serif;font-size:1.2rem;line-height:1.55;overflow-wrap:anywhere}
input{width:100%;max-width:100%;border:1px solid var(--line);background:var(--card);padding:.7rem .8rem;font:inherit}
.set{margin-inline-start:auto;position:relative}
.gear{width:2.2rem;height:2.2rem;border:1px solid var(--line);border-radius:50%;background:var(--card);font:inherit;cursor:pointer;color:var(--ink)}
.set-panel{position:absolute;inset-inline-end:0;top:2.6rem;z-index:30;white-space:nowrap;background:var(--card);border:1px solid var(--line);padding:.4rem .7rem;display:flex;gap:.55rem;align-items:center;box-shadow:0 8px 22px rgba(22,21,19,.08)}
.set-panel[hidden]{display:none}
.set-panel button{border:0;background:none;font:inherit;cursor:pointer;color:var(--ink);min-width:1.6rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
footer{margin-top:2.5rem;border-top:1px solid var(--line);color:var(--muted);font-size:.9rem}
.foot{padding:1rem 0 1.6rem}
.find{position:relative;flex:1;min-width:0}
.find input{width:100%;height:2.35rem;border-radius:999px;padding:.2rem .85rem;font-size:.95rem}
.find-out{position:absolute;z-index:40;inset-inline:0;top:calc(100% + .3rem);background:#fff;border:1px solid var(--line);max-height:18rem;overflow:auto;box-shadow:0 10px 24px rgba(22,21,19,.08)}
.find-out[hidden]{display:none}
.find-out .entry{padding:.55rem .75rem}
.find-out .note{margin:0;padding:.6rem .75rem}