:root{
  --bg:#ece2cd; --surface:#f6f0e1; --raised:#fbf7ec;
  --ink:#2b2018; --muted:#7d6c56; --faint:#a8977c;
  --rubric:#a5381a; --gold:#9a7b34; --indigo:#3d4f73;
  --rule:#d3c5a8; --hl:#c8901e;
  --shadow:0 1px 2px #2b201810,0 8px 30px #2b201814;
}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){
  --bg:#15120e; --surface:#1d1914; --raised:#241f18;
  --ink:#e9dfcb; --muted:#a08e74; --faint:#6d5f4b;
  --rubric:#d9683f; --gold:#c6a052; --indigo:#7d92bd;
  --rule:#342c22; --hl:#d9a534;
  --shadow:0 1px 2px #0006,0 8px 30px #0008;
}}
:root[data-theme=dark]{
  --bg:#15120e; --surface:#1d1914; --raised:#241f18;
  --ink:#e9dfcb; --muted:#a08e74; --faint:#6d5f4b;
  --rubric:#d9683f; --gold:#c6a052; --indigo:#7d92bd;
  --rule:#342c22; --hl:#d9a534;
  --shadow:0 1px 2px #0006,0 8px 30px #0008;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg); color:var(--ink);
  font-family:Jost,ui-sans-serif,system-ui,sans-serif;
  font-weight:400; font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.ar{font-family:'Noto Naskh Arabic',serif;direction:rtl;text-align:right}

/* ---------- chrome ---------- */
header{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:1.5rem;
  padding:.85rem clamp(1rem,4vw,2.5rem);
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--rule);
}
.brand{display:flex;flex-direction:column;line-height:1.15;margin-right:auto;
  text-decoration:none;color:inherit}
.brand b{font-weight:500;font-size:.95rem;letter-spacing:.13em;text-transform:uppercase}
.brand b i{font-style:normal;font-weight:400;color:var(--muted);margin-left:.5rem}
@media(max-width:900px){.brand b i{display:none}}
.brand span{font-size:.7rem;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}
.seg{display:flex;background:var(--surface);border:1px solid var(--rule);border-radius:2px}
.seg button{
  font:inherit;font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;
  padding:.5rem .95rem;background:none;border:0;color:var(--muted);cursor:pointer;
  transition:color .15s,background .15s;
}
.seg button[aria-pressed=true]{background:var(--ink);color:var(--bg)}
.seg button:not([aria-pressed=true]):hover{color:var(--ink)}
.nav{display:flex;align-items:center;gap:.35rem}
.nav a,.icon{
  font:inherit;font-size:.9rem;width:2rem;height:2rem;display:grid;place-items:center;
  background:var(--surface);border:1px solid var(--rule);border-radius:2px;
  color:var(--muted);cursor:pointer;transition:color .15s,border-color .15s;
}
.nav a{text-decoration:none;user-select:none}
.nav a:hover:not(.off),.icon:hover{color:var(--ink);border-color:var(--muted)}
.nav a.off{opacity:.3;pointer-events:none}
.folio{
  font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  min-width:5.5rem;text-align:center;color:var(--ink)
}
.folio.idle{color:var(--faint)}
.prog{height:2px;background:var(--rule);position:relative;overflow:hidden}
.prog i{position:absolute;inset:0 auto 0 0;background:var(--gold);transition:width .4s}

/* ---------- matching ---------- */
.match{display:grid;grid-template-columns:minmax(320px,44%) 1fr;height:calc(100vh - 3.4rem - 2px)}
.plate{position:relative;overflow:auto;background:#000;display:grid;place-items:start center}
.plate .wrap{position:relative;width:100%}
.plate img{width:100%;display:block}
.plate svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.plate rect{fill:transparent;stroke:transparent;stroke-width:.0022;transition:fill .18s,stroke .18s}
.plate rect.on{fill:color-mix(in srgb,var(--hl) 22%,transparent);stroke:var(--hl)}
.plate rect.dim{fill:color-mix(in srgb,var(--hl) 9%,transparent)}

.lines{overflow:auto;padding:1.6rem clamp(1rem,3vw,2.4rem) 6rem}
.row{
  display:grid;gap:.3rem;padding:.7rem .85rem;border-radius:3px;cursor:default;
  border-left:2px solid transparent;transition:background .15s,border-color .15s;
}
.row:hover{background:var(--surface)}
.row.on{background:var(--raised);border-left-color:var(--hl);box-shadow:var(--shadow)}
.row .ar{font-size:1.4rem;line-height:2.05}
.row .tl{font-size:.98rem;font-style:italic;color:var(--muted);letter-spacing:.005em;line-height:1.6}
.row .gl{font-size:.98rem}
.row.rub .ar,.row.rub .gl{color:var(--rubric)}
.n{
  float:right;font-size:.62rem;letter-spacing:.1em;color:var(--faint);
  font-variant-numeric:tabular-nums;padding-top:.35rem
}
.row.med{border-left-color:var(--rule)}
.row.low{border-left-color:var(--rubric)}
.flag{font-size:.72rem;color:var(--rubric);letter-spacing:.04em}

/* ---------- reading ---------- */
.read{max-width:34rem;margin:0 auto;padding:4.5rem clamp(1.2rem,5vw,2rem) 8rem}
.read h2{
  font-weight:300;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--muted);text-align:center;margin-bottom:3rem;
}
.read h2::after{content:'';display:block;width:2.5rem;height:1px;background:var(--gold);margin:.9rem auto 0}
.read p{font-size:1.16rem;line-height:1.85;margin-bottom:1.5rem;cursor:pointer;transition:color .15s}
.read p:hover{color:var(--indigo)}
.read p.rub{color:var(--rubric);font-style:italic;text-align:center;font-size:1.02rem}
.read p:first-of-type::first-letter{
  font-size:3.1rem;line-height:.86;float:left;margin:.16rem .55rem 0 0;
  color:var(--rubric);font-weight:300;
}
figure{margin:3rem -2.5rem}
figure img{width:100%;display:block;border-radius:2px;box-shadow:var(--shadow)}
figcaption{
  font-size:.78rem;color:var(--muted);text-align:center;margin-top:.9rem;
  letter-spacing:.02em;line-height:1.5
}
.cont{
  display:block;text-decoration:none;color:inherit;margin:2.2rem 0;padding:.9rem 1.1rem;
  border-left:2px solid var(--gold);background:var(--surface);border-radius:0 3px 3px 0;
  transition:background .15s;
}
.cont:hover{background:var(--raised)}
.cont .lbl{
  display:block;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);margin-bottom:.35rem;
}
.cont .frag{display:block;font-size:.95rem;color:var(--muted);font-style:italic;line-height:1.6}
.cont.from{margin-top:0}
.cont.to .lbl::after{content:' →'}
.cont.from .lbl::before{content:'← '}
.endnote{
  margin-top:4rem;padding-top:1.5rem;border-top:1px solid var(--rule);
  font-size:.82rem;color:var(--muted)
}
.endnote b{font-weight:500;letter-spacing:.1em;text-transform:uppercase;font-size:.68rem;
  display:block;margin-bottom:.7rem;color:var(--faint)}
.endnote li{list-style:none;margin-bottom:.5rem}
.endnote code{font-family:'Noto Naskh Arabic',serif;font-size:1.05rem;color:var(--ink)}

.idx{max-width:52rem;margin:0 auto;padding:3rem clamp(1rem,4vw,2rem) 7rem}
.lede{max-width:44rem;margin-bottom:2.4rem}
.lede p{font-size:.95rem;line-height:1.8;color:var(--muted);margin-bottom:.9rem}
.lede p:first-child{font-size:1.06rem;line-height:1.7;color:var(--ink)}
.lede p:last-child{margin-bottom:0}
.lede i{font-style:italic}
.idx .search{
  width:100%;font:inherit;font-size:1rem;padding:.8rem 1rem;margin-bottom:.6rem;
  background:var(--surface);border:1px solid var(--rule);border-radius:2px;color:var(--ink);
}
.idx .search::placeholder{color:var(--faint)}
.idx .search:focus{outline:none;border-color:var(--gold)}
.idx .count{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);
  margin-bottom:1.6rem;display:block}
.idx ol{list-style:none}
.idx li{
  display:grid;grid-template-columns:5.5rem 1fr auto;gap:1rem;align-items:baseline;
  padding:.5rem .75rem;border-bottom:1px solid var(--rule);
}
.idx li.has{cursor:pointer}
.idx li.has:hover{background:var(--surface)}
.idx li.has .fo{color:var(--gold);font-weight:500}
.idx .fo{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.idx .ti{font-size:.95rem;color:var(--ink)}
.idx li:not(.has) .ti{color:var(--muted)}
.idx .mk{font-size:.72rem;color:var(--gold);letter-spacing:.1em}
.idx .dot{color:var(--indigo)}
.blanknote{padding:4rem 1rem;max-width:26rem;color:var(--muted)}
.blanknote b{display:block;font-weight:400;font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--faint);margin-bottom:1rem}
.blanknote p{font-size:1.02rem;line-height:1.8}
.empty{display:grid;place-items:center;height:60vh;text-align:center;color:var(--muted);gap:.6rem}
.empty b{font-weight:400;letter-spacing:.18em;text-transform:uppercase;font-size:.78rem}
@media(max-width:820px){
  .match{grid-template-columns:1fr;height:auto}
  .plate{max-height:52vh;position:sticky;top:3.4rem;z-index:10}
  figure{margin:2.5rem 0}
}
.idx .bo{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.idx li.blank .ti{color:var(--faint);font-style:italic}
.idx ol.seo{list-style:none;font-size:.92rem;columns:2;column-gap:2.5rem}
.idx ol.seo li{display:block;border:0;padding:.18rem 0}
.idx ol.seo a{color:var(--gold)}
@media(max-width:700px){.idx ol.seo{columns:1}}

/* ---------- language ---------- */
.lang{display:flex;background:var(--surface);border:1px solid var(--rule);border-radius:2px}
.lang a{font-size:.68rem;letter-spacing:.12em;padding:.42rem .55rem;color:var(--muted);
  text-decoration:none;transition:color .15s,background .15s}
.lang a[aria-current=true]{background:var(--ink);color:var(--bg)}
.lang a:not([aria-current=true]):hover{color:var(--ink)}
@media(max-width:700px){header{flex-wrap:wrap;gap:.7rem 1rem}}

/* ---------- human approval ---------- */
.ast{font-size:.62em;vertical-align:super;line-height:0;margin-left:.15em;white-space:nowrap;
  color:var(--rubric);font-weight:600;font-style:normal;text-decoration:none;letter-spacing:0}
a.ast:hover{text-decoration:underline}
.ast+.ast{margin-left:.35em}
.legend,.pending{font-size:.82rem;line-height:1.6;color:var(--muted);margin:-1.4rem 0 2.2rem;
  padding:.65rem .95rem;background:var(--surface);border-left:2px solid var(--rubric);
  border-radius:0 3px 3px 0}
.pending{border-left-color:var(--gold)}
.legend b{color:var(--rubric);font-weight:500}
.legend .ast,.endnote .ast{font-size:1em;vertical-align:baseline;margin:0 .45rem 0 0}
.legend+.legend,.pending+.legend{margin-top:0}
.read p.tr{color:color-mix(in srgb,var(--ink) 82%,var(--bg))}
.entag{font-size:.6rem;letter-spacing:.14em;color:var(--gold);border:1px solid var(--rule);
  border-radius:2px;padding:0 .3rem;margin-left:.35rem;vertical-align:middle;font-style:normal}
.endnote h4{font-weight:500;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);margin:1.3rem 0 .6rem}
.endnote h4.need{color:var(--rubric)}
.endnote li{padding:.35rem .7rem;border-left:2px solid var(--rule);scroll-margin:6rem 0;
  border-radius:0 3px 3px 0}
.endnote li.open{border-left-color:var(--rubric)}
.endnote .ln{font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-right:.35rem}
.endnote .st{font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-right:.5rem}
.endnote .alt,.endnote .nt{display:block}
.endnote li.flash{animation:flash 1.8s ease-out}
@keyframes flash{from{background:color-mix(in srgb,var(--hl) 30%,transparent)}to{background:transparent}}
.flag .need{font-weight:600}
figure.noimg .ph{aspect-ratio:3/2;display:grid;place-items:center;background:var(--surface);
  border:1px dashed var(--rule);border-radius:2px;color:var(--faint);
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase}