:root{
  
  --n0:#FBFAF7; --n1:#F5F3EE; --n2:#EDEAE3; --n3:#E5E1D9; --n4:#D5D0C6;
  --n5:#AAA69C; --n6:#5F5D57; --n7:#565450; --n8:#171612;

  --ground:var(--n2); --card:var(--n0); --cream:var(--n1);
  --hair:var(--n3); --hair-2:var(--n4);
  --ink:var(--n8); --ink-2:var(--n7); --ink-3:var(--n6);

  
  --amber:#9A4C14; --amber-ink:#7E3D0F; --amber-tint:#F0E6DA;
  --teal:#3F6B58; --teal-ink:#2F5342; --teal-tint:#E4EBE6;
  --navy:#3A3A46; --navy-tint:#E7E5E0;

  
  --rail:#1B1916; --rail-2:#26231E; --rail-3:#322E28;
  --rail-ink:#F2EFE8; --rail-ink-2:#C6C0B5; --rail-mut:#9C968B;
  --rail-hair:rgba(242,239,232,.16);
  --amber-rail:#D98A3C; --amber-rail-ink:#E8A55F;

  --r:14px; --r-s:9px; --r-l:20px;
  --e1:0 1px 2px rgba(20,22,38,.045), 0 2px 8px -2px rgba(20,22,38,.055);
  --e2:0 2px 4px rgba(20,22,38,.05),  0 10px 26px -8px rgba(20,22,38,.10);
  --e3:0 4px 10px rgba(20,22,38,.06), 0 18px 44px -10px rgba(20,22,38,.15);

  --c:cubic-bezier(.32,.72,0,1);
  --f:'Readex Pro',system-ui,sans-serif;
  
  --fig:'Amiri',serif;
  --naskh:'Amiri',serif;
  --serif:'Source Serif 4',Georgia,serif;
  --rail-w:212px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--ground); color:var(--ink);
  font-family:var(--f); font-weight:400; font-size:14px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--amber);color:#fff}
a{color:inherit}
b,strong{font-weight:500}
button,input,select{font-family:inherit;font-size:inherit;color:inherit}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
bdi{unicode-bidi:isolate}


html[dir="rtl"] p, html[dir="rtl"] li, html[dir="rtl"] td, html[dir="rtl"] dd{line-height:1.7}


.run{font-size:11.5px;color:var(--ink-3);line-height:1.5;letter-spacing:0}
html[dir="ltr"] .run{letter-spacing:.07em;text-transform:uppercase}

.naskh{font-family:var(--naskh);line-height:1.9}
html[dir="ltr"] .naskh{font-family:var(--serif);line-height:1.6}
.fig{font-family:var(--fig);font-weight:400;font-size:1.08em}
html[dir="ltr"] .fig{font-family:var(--serif);font-weight:600;font-variant-numeric:tabular-nums}


.card{background:var(--card);border-radius:var(--r);box-shadow:var(--e1);border:1px solid var(--hair)}
.card.lift{box-shadow:var(--e2)}
.ch{display:flex;align-items:center;gap:10px;padding:13px 18px;border-bottom:1px solid var(--hair)}
.ch h2{margin:0;font-size:14px;font-weight:500;line-height:1.4}
.ch .sp{flex:1}
.cb{padding:16px 18px}


.tag{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:999px;
  font-size:11.5px;line-height:1.5;border:1px solid var(--hair-2);color:var(--ink-2);background:var(--cream)}
.tag.act{border-color:var(--amber);color:var(--amber-ink);background:var(--amber-tint)}
.tag.set{border-color:var(--teal);color:var(--teal-ink);background:var(--teal-tint)}
.tag.q{border-color:var(--hair-2);color:var(--ink-3);background:transparent}

.btn{appearance:none;background:var(--card);border:1px solid var(--hair-2);border-radius:999px;
  padding:7px 15px;font-size:12.5px;cursor:pointer;transition:transform 160ms var(--c),background .2s var(--c)}
.btn:active{transform:scale(.975)}
.btn.pri{background:var(--ink);border-color:var(--ink);color:var(--card)}
.btn.acc{background:var(--amber);border-color:var(--amber);color:#fff}
.btn.sm{padding:4px 11px;font-size:11.5px}

.sample{font-size:11px;color:var(--ink-3);border:1px dashed var(--hair-2);
  border-radius:999px;padding:3px 11px;white-space:nowrap}


.nil{color:var(--ink-3);font-style:normal;opacity:.75}


.app{display:grid;grid-template-columns:var(--rail-w) 1fr;min-height:100vh}
.rail{background:var(--rail);color:var(--rail-ink-2);padding:16px 0 12px;display:flex;flex-direction:column;gap:2px}
.rail .top{display:flex;align-items:center;gap:10px;padding:2px 16px 14px}
.rail .mk{font-family:var(--naskh);font-size:26px;line-height:1;color:var(--rail-ink)}
.rail .wm{display:flex;flex-direction:column;line-height:1.35;min-width:0}
.rail .wm b{font-size:13px;color:var(--rail-ink);font-weight:500}
.rail .wm span{font-size:10.5px;color:var(--rail-mut)}
.rail .grp{padding:8px 10px 4px}
.rail .lbl{display:block;padding:0 8px 6px;font-size:10.5px;color:var(--rail-mut)}
.rail .nv{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:var(--r-s);
  font-size:12.5px;color:var(--rail-ink-2);cursor:pointer}
.rail .nv svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.rail .nv .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rail .nv .b{font-family:var(--fig);font-size:12px;color:var(--rail-mut)}
.rail .nv .b.hot{color:var(--amber-rail)}
.rail .nv.on{background:var(--rail-2);color:var(--rail-ink)}
.rail .nv.on svg{opacity:1}
.rail .sp{flex:1}
.rail .rfoot{display:flex;align-items:center;gap:9px;padding:12px 18px 0;margin-top:8px;
  border-top:1px solid var(--rail-hair)}
.rail .av{width:28px;height:28px;border-radius:999px;background:var(--rail-3);color:var(--rail-ink);
  display:grid;place-items:center;font-size:11px;flex:none}
.rail .who{display:flex;flex-direction:column;line-height:1.35;min-width:0}
.rail .who b{font-size:12px;color:var(--rail-ink);font-weight:500}
.rail .who span{font-size:10.5px;color:var(--rail-mut)}

.main{display:flex;flex-direction:column;min-width:0;background:var(--ground)}
.topbar{display:flex;align-items:center;gap:12px;padding:11px 22px;background:var(--cream);
  border-bottom:1px solid var(--hair);flex:none}
.topbar .mtr{display:flex;align-items:center;gap:9px;font-size:12.5px}
.topbar .mtr .k{color:var(--ink-3);font-size:11.5px}
.topbar .mtr b{font-weight:500}
.topbar .sp{flex:1}
.scroll{flex:1;overflow:auto;padding:22px}
.wrap{max-width:1320px;margin:0 auto}
.ph{display:flex;align-items:flex-end;gap:16px;margin-bottom:18px}
.ph h1{margin:0;font-size:24px;font-weight:450;line-height:1.35}
.ph .sub{display:block;margin-top:4px;font-size:12.5px;color:var(--ink-3)}
.statusbar{display:flex;align-items:center;gap:14px;padding:8px 22px;background:var(--cream);
  border-top:1px solid var(--hair);font-size:11.5px;color:var(--ink-3);flex:none}


table.g{width:100%;border-collapse:collapse;font-size:12.5px}
table.g th{text-align:start;font-weight:500;color:var(--ink-3);font-size:11.5px;
  padding:9px 12px;border-bottom:1px solid var(--hair-2);vertical-align:bottom;line-height:1.45}
table.g td{padding:10px 12px;border-bottom:1px solid var(--hair);vertical-align:top;line-height:1.55}
table.g tr:last-child td{border-bottom:0}
table.g tr.on td{background:var(--cream)}


.ink-page{background:var(--rail);color:var(--rail-ink)}
.ink-page .run{color:var(--rail-mut)}
.ink-page .card{background:var(--rail-2);border-color:var(--rail-hair);box-shadow:none}
.ink-page .ch{border-color:var(--rail-hair)}
.ink-page table.g th{color:var(--rail-mut);border-color:var(--rail-hair)}
.ink-page table.g td{border-color:var(--rail-hair)}
.ink-page .tag{background:transparent;border-color:var(--rail-hair);color:var(--rail-ink-2)}
.ink-page .tag.act{border-color:var(--amber-rail);color:var(--amber-rail-ink);background:rgba(217,138,60,.12)}
.ink-page .nil{color:var(--rail-mut)}
.ink-page .sample{color:var(--rail-mut);border-color:var(--rail-hair)}
.ink-page .btn{background:transparent;border-color:var(--rail-hair);color:var(--rail-ink)}
.ink-page .btn.pri{background:var(--rail-ink);border-color:var(--rail-ink);color:var(--rail)}
.ink-page .btn.acc{background:var(--amber-rail);border-color:var(--amber-rail);color:var(--rail)}


.plate{position:fixed;inset-block-end:0;inset-inline-start:0;z-index:90;display:flex;align-items:center;gap:12px;
  padding:7px 16px;background:var(--ink);color:var(--n1);font-size:11px;
  border-start-end-radius:var(--r-s)}
.plate b{font-weight:500;color:#fff}
.plate .n{font-family:var(--fig);font-size:12.5px;color:var(--amber-rail)}
.plate .src{color:var(--n5)}