:root{
  
  --bg:#FFFFFF;             
  --bg-2:#F1F7F2;           
  --surface:#FFFFFF;         
  --surface-2:#F7FBF8;

  
  
  --ink:#0F1A14;
  --ink-soft:#42544A;
  
  --ink-faint:#55665C;

  
  --brand:#12784A;          
  --brand-text:#136B43;     
  --brand-lt:#34B073;
  --brand-deep:#0E5433;
  --brand-wash:rgba(18,120,74,.10);
  --accent:#B8901A;          
  --on-accent:#1A1405;       
  --on-brand:#FFFFFF;        
  --on-ink:#F2FAF5;

  
  --panel:#0D1B13;
  --panel-2:#123024;
  --on-panel:#EFF7F1;

  
  
  --teal:#0E7C6B;
  --moss:#2F7D32;
  --sky:#2E86AB;
  --grad-brand:linear-gradient(120deg,var(--brand-lt) 0%,var(--brand) 52%,var(--teal) 100%);
  --grad-btn:linear-gradient(120deg,#1E8E5A 0%,#12775A 55%,#0E5F52 100%);
  --grad-soft:linear-gradient(135deg,rgba(30,142,90,.14),rgba(14,124,107,.12));

  
  --glass:color-mix(in srgb,var(--surface) 72%,transparent);
  --glass-strong:color-mix(in srgb,var(--surface) 88%,transparent);
  --glass-line:rgba(255,255,255,.65);
  --glass-shadow:0 2px 6px rgba(13,27,19,.05),0 18px 50px rgba(14,84,51,.10);

  
  --ok:#2E7D57;
  --bad:#C0392B;
  --bad-solid:#A8281B;      

  
  --line:rgba(15,26,20,.13);
  --line-strong:rgba(15,26,20,.26);
  --shadow:0 1px 2px rgba(15,26,20,.05),0 10px 30px rgba(14,84,51,.08);
  --glow:radial-gradient(circle at 50% 0%,rgba(30,142,90,.14),transparent 62%);

  
  
  
  
  
  
  --a1:#12784A; --a1w:#E7F2EC; --a1l:#8FD6B4;
  --a2:#2E6BC6; --a2w:#E6EEF9; --a2l:#9EC0EE;
  --a3:#B4553C; --a3w:#F8ECE8; --a3l:#EDAE9B;
  --a4:#7A5AB8; --a4w:#EFEAF8; --a4l:#BFAEE6;
  --a5:#8A6A12; --a5w:#F7F1E0; --a5l:#E4C868;
  --a6:#0E7C6B; --a6w:#E4F1EF; --a6l:#84D4C6;

  

  
  --f-disp:"Readex Pro",system-ui,sans-serif;
  --f-body:"Readex Pro",system-ui,sans-serif;
  --f-lat:"Newsreader",Georgia,serif;
  --f-num:"IBM Plex Mono",ui-monospace,monospace;

  
  --dur-1:.14s;               
  --dur-2:.24s;               
  --dur-3:.42s;               
  --dur-4:.62s;               
  --ease-out:cubic-bezier(.16,.84,.44,1);
  --ease-soft:cubic-bezier(.34,.9,.4,1);
  --ease-back:cubic-bezier(.34,1.4,.5,1);   
  --lift:translateY(-3px);
  --glow-brand:0 0 0 1px color-mix(in srgb,var(--brand) 28%,transparent),
               0 10px 30px color-mix(in srgb,var(--brand) 26%,transparent);

  
  
  --sp-1:4px; --sp-2:8px; --sp-3:12px;
  --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px;

  --r-s:10px; --r-m:18px; --r-l:28px; --r-xl:36px;
  --sp:clamp(16px,4vw,28px);
  --sidebar-w:266px;
  --sidebar-w-sm:74px;
  --rail-w:280px;
  --content-max:720px;
  --tabbar-h:60px;
}


@media (max-width:760px){
  .tile .kind{font-size:0}   
}


:root[data-theme="dark"]{
  
  --bg:#0C1310;
  --bg-2:#121C17;
  --surface:#14201A;
  --surface-2:#1A2A22;
  --ink:#ECF5EF;
  --ink-soft:#AFC2B7;
  --ink-faint:#8FA398;      
  --brand:#35B27A;
  --brand-text:#5FD09A;     
  --brand-lt:#5FD09A;
  --brand-deep:#7FE0B2;
  
  
  --a1:#4FCB92; --a1w:#12261D; --a1l:#1F6D4C;
  --a2:#7FB0F0; --a2w:#131E2B; --a2l:#2B5389;
  --a3:#E29078; --a3w:#2A1B16; --a3l:#8B4A36;
  --a4:#B79BEA; --a4w:#1E1830; --a4l:#5C4890;
  --a5:#D9B45A; --a5w:#241E10; --a5l:#7A6224;
  --a6:#5FD3C0; --a6w:#0F2622; --a6l:#22705F;
  --brand-wash:rgba(53,178,122,.16);
  --accent:#E0BE3C;
  --on-accent:#1A1405;
  --on-brand:#04150C;       
  --on-ink:#F2FAF5;
  --ok:#5CC98F;
  --bad:#FF8B7C;
  --bad-solid:#B3352A;
  --line:rgba(232,246,238,.16);
  --line-strong:rgba(232,246,238,.30);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.35);
  --glow:radial-gradient(circle at 50% 0%,rgba(53,178,122,.16),transparent 62%);
  --glass:color-mix(in srgb,var(--surface) 66%,transparent);
  --glass-strong:color-mix(in srgb,var(--surface) 86%,transparent);
  --glass-line:rgba(255,255,255,.10);
  --glass-shadow:0 2px 6px rgba(0,0,0,.4),0 20px 55px rgba(0,0,0,.45);
  --grad-soft:linear-gradient(135deg,rgba(53,178,122,.18),rgba(14,124,107,.18));
  
  --panel:#16261E;
  --panel-2:#1B3A2C;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0C1310;
    --bg-2:#121C17;
    --surface:#14201A;
    --surface-2:#1A2A22;
    --ink:#ECF5EF;
    --ink-soft:#AFC2B7;
    --ink-faint:#8FA398;
    --brand:#35B27A;
    --brand-text:#5FD09A;
    --brand-lt:#5FD09A;
    --brand-deep:#7FE0B2;
    --brand-wash:rgba(53,178,122,.16);
    --accent:#E0BE3C;
    --on-brand:#04150C;
    --ok:#5CC98F;
    --bad:#FF8B7C;
    --bad-solid:#B3352A;
    --line:rgba(232,246,238,.16);
    --line-strong:rgba(232,246,238,.30);
    --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.35);
    --glow:radial-gradient(circle at 50% 0%,rgba(53,178,122,.16),transparent 62%);
    --glass:color-mix(in srgb,var(--surface) 66%,transparent);
    --glass-strong:color-mix(in srgb,var(--surface) 86%,transparent);
    --glass-line:rgba(255,255,255,.10);
    --glass-shadow:0 2px 6px rgba(0,0,0,.4),0 20px 55px rgba(0,0,0,.45);
    --grad-soft:linear-gradient(135deg,rgba(53,178,122,.18),rgba(14,124,107,.18));
    --panel:#16261E;
    --panel-2:#1B3A2C;
  }
}


.glass{
  background:var(--glass);
  backdrop-filter:blur(20px) saturate(1.35);
  -webkit-backdrop-filter:blur(20px) saturate(1.35);
  border:1px solid var(--glass-line);
  box-shadow:var(--glass-shadow);
}
.grad-text{
  background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}


.mesh{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.mesh i{
  position:absolute;display:block;border-radius:50%;filter:blur(72px);opacity:.5;
  animation:drift 22s ease-in-out infinite
}
.mesh i:nth-child(1){width:46vw;height:46vw;top:-12vw;inset-inline-start:-8vw;
  background:radial-gradient(circle,rgba(30,142,90,.5),transparent 68%)}
.mesh i:nth-child(2){width:40vw;height:40vw;top:18vh;inset-inline-end:-10vw;
  background:radial-gradient(circle,rgba(14,124,107,.42),transparent 68%);animation-delay:-7s}
.mesh i:nth-child(3){width:38vw;height:38vw;bottom:-10vw;inset-inline-start:22vw;
  background:radial-gradient(circle,rgba(255,77,157,.35),transparent 68%);animation-delay:-14s}
@keyframes drift{
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(4vw,-3vh) scale(1.08)}
  66%{transform:translate(-3vw,4vh) scale(.95)}
}
:root[data-theme="dark"] .mesh i{opacity:.34}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}

html{-webkit-text-size-adjust:100%;background:var(--bg);color:var(--ink)}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--f-body);font-weight:400;line-height:1.7;
  transition:background-color .25s ease,color .25s ease;
}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
input{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

h1,h2,h3{margin:0;line-height:1.25}

h1,h2{font-family:var(--f-disp);font-weight:800;letter-spacing:-.022em;line-height:1.06}

[dir="rtl"] h1,[dir="rtl"] h2{letter-spacing:0;line-height:1.3;font-weight:800}
[dir="rtl"] h3{letter-spacing:0;line-height:1.4}
[dir="rtl"] body{line-height:1.9}
[dir="rtl"] .lead,[dir="rtl"] p{line-height:1.85}

[dir="rtl"] .num{font-family:"IBM Plex Mono",monospace;direction:ltr;display:inline-block}
h3{font-family:var(--f-disp);font-weight:600;letter-spacing:-.012em}


[lang="ar"] h1, [lang="ar"] h2, [dir="rtl"] h1, [dir="rtl"] h2{
  letter-spacing:0;line-height:1.32;font-weight:700
}
[lang="ar"] h3, [dir="rtl"] h3{letter-spacing:0;line-height:1.4}
[dir="rtl"] body, [lang="ar"] body{line-height:1.85}
[dir="rtl"] p, [dir="rtl"] .lead, [dir="rtl"] .mini{line-height:1.9}

[dir="rtl"] .num{font-family:var(--f-num);direction:ltr;display:inline-block}
h1{font-size:clamp(28px,6vw,36px)}
h2{font-size:clamp(22px,4.6vw,28px)}

h1{font-size:clamp(28px,7vw,28px)}
h3{font-size:18px;font-weight:600}
p{margin:0}
.is-hidden{display:none!important}


.theme-btn{
  width:38px;height:38px;flex:0 0 auto;border-radius:50%;
  border:1.5px solid var(--line);background:var(--surface);
  display:grid;place-items:center;font-size:16px;color:var(--ink-soft);
  transition:border-color .2s ease,color .2s ease;
}
.theme-btn:hover{border-color:var(--brand);color:var(--brand-text)}