@font-face{ font-family:"Thmanyah Display"; src:url("/fonts/thmanyah-display-700.woff2") format("woff2"); font-weight:700; font-display:swap; }
@font-face{ font-family:"Thmanyah Display"; src:url("/fonts/thmanyah-display-500.woff2") format("woff2"); font-weight:500; font-display:swap; }
@font-face{ font-family:"Thmanyah Text"; src:url("/fonts/thmanyah-text-400.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face{ font-family:"Thmanyah Sans"; src:url("/fonts/thmanyah-sans-400.woff2") format("woff2"); font-weight:400; font-display:swap; }
:root{ --bg:#0F1319; --bg-2:#151B23; --bg-3:#1B222C; --ink:#E4E4DE; --ink-60:#9AA1A8; --ink-38:#636A72;
  --line:rgba(228,228,222,.16); --line-soft:rgba(228,228,222,.08);
  --accent:#7AD6CB; --accent-mid:#58C2B6; --accent-deep:#2E8F86; --accent-soft:rgba(88,194,182,.12); --glow:#EFE7CF;
  --serif:"EB Garamond",Georgia,serif; --mono:"IBM Plex Mono",ui-monospace,monospace; --jp:"Shippori Mincho",serif;
  --ar-display:"Thmanyah Display","Amiri",serif; --ar-text:"Thmanyah Text","Amiri",serif; --ar-sans:"Thmanyah Sans",system-ui,sans-serif;
  --pad:clamp(1.25rem,4.5vw,4rem); color-scheme:dark; }
html[data-theme="day"]{ --bg:#F3F2ED; --bg-2:#EAE9E1; --bg-3:#E1E0D7; --ink:#1A1D21; --ink-60:#565C61; --ink-38:#989DA2;
  --line:rgba(26,29,33,.18); --line-soft:rgba(26,29,33,.08); --accent:#14716A; --accent-mid:#1E8A80; --accent-deep:#2AA398; --accent-soft:rgba(30,138,128,.10); --glow:#D8CBA6; color-scheme:light; }
*,*::before,*::after{ box-sizing:border-box; }
body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--serif); font-size:1.0625rem; line-height:1.75;
  -webkit-font-smoothing:antialiased; transition:background-color .5s,color .5s; }
::selection{ background:var(--accent-mid); color:#0F1319; }
a{ color:inherit; text-decoration-color:var(--ink-38); text-underline-offset:.22em; }
a:hover{ text-decoration-color:var(--accent-mid); }
:focus-visible{ outline:2px solid var(--accent-mid); outline-offset:3px; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; padding:0; }
h1,h2,h3{ font-weight:500; line-height:1.16; margin:0; } p{ margin:0; }
.meta{ font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-60); }
html[lang="ar"] body{ font-family:var(--ar-text); font-size:1.145rem; line-height:1.95; }
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3{ font-family:var(--ar-display); line-height:1.45; }
html[lang="ar"] .meta,html[lang="ar"] .tool{ font-family:var(--ar-sans); text-transform:none; letter-spacing:0; font-size:.82rem; }
.nav{ position:fixed; top:0; inset-inline:0; z-index:60; height:64px; display:flex; align-items:center; justify-content:space-between;
  padding-inline:clamp(1rem,3vw,2.2rem); background:color-mix(in srgb,var(--bg) 84%,transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line-soft); }
.brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; }
.brand svg{ inline-size:30px; block-size:30px; color:var(--accent-mid); }
.brand b{ font-weight:500; }
.nav__tools{ display:flex; gap:.4rem; }
.tool{ font-family:var(--mono); font-size:.72rem; border:1px solid var(--line); padding:.42em .68em; color:var(--ink-60); min-block-size:40px; min-inline-size:40px; display:inline-grid; place-content:center; text-decoration:none; }
.tool:hover{ color:var(--ink); border-color:var(--ink-60); }
.tool--jp{ font-family:var(--jp); }
.page{ max-width:900px; margin-inline:auto; padding:calc(64px + 3.5rem) var(--pad) 4.5rem; }
.crumb{ font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-38); }
html[lang="ar"] .crumb{ font-family:var(--ar-sans); letter-spacing:0; text-transform:none; font-size:.82rem; }
h1{ font-size:clamp(2.3rem,5.6vw,3.7rem); margin-block-start:.9rem; display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap; }
h1 .jp{ font-family:var(--jp); font-size:.45em; color:var(--ink-38); letter-spacing:.3em; }
.lede{ margin-block-start:1.2rem; max-inline-size:62ch; color:var(--ink-60); font-size:1.05rem; }
.sec{ margin-block-start:3.2rem; }
.sec > h2{ font-size:clamp(1.5rem,3vw,2.1rem); border-block-end:1px solid var(--line-soft); padding-block-end:.6rem; display:flex; justify-content:space-between; align-items:baseline; gap:1rem; }
.sec > h2 .meta{ font-size:.62rem; }
.sec > p{ margin-block-start:1rem; max-inline-size:66ch; }
.foot{ margin-block-start:4rem; border-top:1px solid var(--line-soft); padding-block-start:1.6rem; display:flex; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; align-items:center; }
.foot a{ font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; color:var(--ink-60); }
html[lang="ar"] .foot a{ font-family:var(--ar-sans); letter-spacing:0; text-transform:none; font-size:.84rem; }
.foot a:hover{ color:var(--accent); }
.foot svg{ inline-size:30px; block-size:30px; color:var(--accent-mid); }
@media (prefers-reduced-motion: reduce){ *{ transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; } }
.now{ margin-block-start:2.2rem; display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:1rem; }
.ncell{ border:1px solid var(--line-soft); padding:1.1rem 1.2rem; background:var(--bg-2); }
.ncell h2{ font-size:.78rem; font-family:var(--mono); font-weight:500; letter-spacing:.09em; text-transform:uppercase; color:var(--accent); }
html[lang="ar"] .ncell h2{ font-family:var(--ar-sans); letter-spacing:0; text-transform:none; font-size:.9rem; }
.ncell p{ margin-block-start:.6rem; color:var(--ink-60); font-size:.96rem; }
.stamp-date{ display:inline-block; border:1.5px solid var(--accent-mid); color:var(--accent); font-family:var(--mono); font-size:.7rem; letter-spacing:.08em; padding:.4em .8em; margin-block-start:1rem; }
html[lang="ar"] .stamp-date{ font-family:var(--ar-sans); letter-spacing:0; font-size:.84rem; }