@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:940px; 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; }
.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; } }
.term{ margin-block-start:3rem; display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,380px); gap:clamp(1.4rem,4vw,3rem); align-items:start; border-top:1px solid var(--line-soft); padding-block-start:2rem; }
.term:nth-of-type(even){ grid-template-columns:minmax(260px,380px) minmax(0,1fr); }
.term:nth-of-type(even) .tinfo{ order:2; }
.term h2{ font-size:clamp(1.5rem,3vw,2rem); display:flex; align-items:baseline; gap:.8rem; flex-wrap:wrap; }
.term h2 .jp{ font-family:var(--jp); font-size:.55em; color:var(--ink-38); }
.term h2 .en{ font-family:var(--serif); font-size:.55em; color:var(--ink-60); font-style:italic; }
.term .phil{ margin-block-start:.9rem; color:var(--ink-60); max-inline-size:52ch; }
.term .phil b{ color:var(--ink); font-weight:500; }
.term .tlink{ margin-block-start:.9rem; font-family:var(--mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; }
html[lang="ar"] .term .tlink{ font-family:var(--ar-sans); letter-spacing:0; text-transform:none; font-size:.82rem; }
.explain{ inline-size:100%; block-size:auto; border:1px solid var(--line-soft); background:var(--bg-2); }
@media (max-width:760px){ .term,.term:nth-of-type(even){ grid-template-columns:1fr; } .term:nth-of-type(even) .tinfo{ order:0; } }
/* --- animations (paused under reduced motion by the global rule) --- */
.cut{ stroke:var(--accent-mid); stroke-dasharray:4 5; transform:scaleY(0); transform-origin:top; animation:cut 4.6s infinite; }
.cut.c2{ animation-delay:.25s; } .cut.c3{ animation-delay:.5s; }
@keyframes cut{ 0%,12%{ transform:scaleY(0);} 26%,78%{ transform:scaleY(1);} 92%,100%{ transform:scaleY(0);} }
.chip{ opacity:0; transform:translateY(10px); animation:chip 4.6s infinite; }
.chip.k2{ animation-delay:.12s; } .chip.k3{ animation-delay:.24s; } .chip.k4{ animation-delay:.36s; }
@keyframes chip{ 0%,30%{ opacity:0; transform:translateY(10px);} 44%,80%{ opacity:1; transform:none;} 94%,100%{ opacity:0; transform:translateY(10px);} }
.bar{ transform:scaleX(0); transform-origin:left; animation:bar 4.2s infinite; }
.bar.b2{ animation-name:bar2; }
@keyframes bar{ 0%,10%{ transform:scaleX(0);} 45%,85%{ transform:scaleX(1);} 100%{ transform:scaleX(0);} }
@keyframes bar2{ 0%,10%{ transform:scaleX(0);} 60%,85%{ transform:scaleX(1);} 100%{ transform:scaleX(0);} }
.cnt{ opacity:0; animation:cnt 4.2s infinite; }
@keyframes cnt{ 50%,85%{ opacity:1; } }
.mark-fall{ opacity:0; transform:translateY(-14px); animation:fall 5s infinite; }
.mark-fall.m2{ animation-delay:.5s; } .mark-fall.m3{ animation-delay:1s; }
@keyframes fall{ 0%,10%{ opacity:0; transform:translateY(-14px);} 24%,82%{ opacity:1; transform:none;} 95%,100%{ opacity:0; }}
.att{ stroke-dasharray:120; stroke-dashoffset:120; animation:att 3.8s infinite; }
.att.a2{ animation-delay:.15s; } .att.a3{ animation-delay:.3s; } .att.a4{ animation-delay:.45s; }
@keyframes att{ 15%{ stroke-dashoffset:120; } 45%,80%{ stroke-dashoffset:0; } 100%{ stroke-dashoffset:120; } }
.drift{ animation:drift 6s ease-in-out infinite alternate; }
.drift.d2{ animation-name:drift2; } .drift.d3{ animation-name:drift3; }
.drift.d4{ animation-name:drift4; } .drift.d5{ animation-name:drift5; } .drift.d6{ animation-name:drift6; }
@keyframes drift{ from{ transform:translate(0,0);} to{ transform:translate(46px,-30px);} }
@keyframes drift2{ from{ transform:translate(0,0);} to{ transform:translate(58px,-12px);} }
@keyframes drift3{ from{ transform:translate(0,0);} to{ transform:translate(40px,4px);} }
@keyframes drift4{ from{ transform:translate(0,0);} to{ transform:translate(-52px,26px);} }
@keyframes drift5{ from{ transform:translate(0,0);} to{ transform:translate(-40px,40px);} }
@keyframes drift6{ from{ transform:translate(0,0);} to{ transform:translate(-58px,14px);} }
.slide-l{ animation:slideL 5.5s ease-in-out infinite alternate; }
.slide-r{ animation:slideR 5.5s ease-in-out infinite alternate; }
@keyframes slideL{ from{ transform:translateX(0);} to{ transform:translateX(34px);} }
@keyframes slideR{ from{ transform:translateX(0);} to{ transform:translateX(-34px);} }
.leak{ opacity:0; animation:leak 5.5s ease-in-out infinite alternate; }
@keyframes leak{ 0%,55%{ opacity:0; } 85%,100%{ opacity:1; } }