:root{ --ink:#111111; --paper:#ffffff; --line:#dcdcdc; --dim:#555555; }
html[data-theme="dark"]{ --ink:#e8e8e8; --paper:#111111; --line:#333333; --dim:#999999; }
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{ background-color:var(--paper); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cg fill='none' stroke='%23e3e3e3' stroke-width='1'%3E%3Cpath d='M14 30 H84 V104 H160'/%3E%3Cpath d='M226 20 V76 H140 V164'/%3E%3Cpath d='M34 218 V152 L78 108'/%3E%3Cpath d='M196 226 H130 V186'/%3E%3Cpath d='M66 12 V48'/%3E%3Cpath d='M104 226 V196 H150'/%3E%3C/g%3E%3Cg fill='%23e3e3e3'%3E%3Ccircle cx='14' cy='30' r='3'/%3E%3Ccircle cx='160' cy='104' r='3'/%3E%3Ccircle cx='226' cy='20' r='3'/%3E%3Ccircle cx='140' cy='164' r='3'/%3E%3Ccircle cx='34' cy='218' r='3'/%3E%3Ccircle cx='78' cy='108' r='3'/%3E%3Ccircle cx='196' cy='226' r='3'/%3E%3Ccircle cx='150' cy='196' r='3'/%3E%3Ccircle cx='66' cy='12' r='3'/%3E%3Crect x='100' y='128' width='16' height='10'/%3E%3Crect x='182' y='58' width='10' height='16'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:repeat; color:var(--ink);
  font-family:"JetBrains Mono","SFMono-Regular",Consolas,"Courier New",monospace;
  font-size:14px; line-height:1.7; }
html[data-theme="dark"] body{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cg fill='none' stroke='%232e2e2e' stroke-width='1'%3E%3Cpath d='M14 30 H84 V104 H160'/%3E%3Cpath d='M226 20 V76 H140 V164'/%3E%3Cpath d='M34 218 V152 L78 108'/%3E%3Cpath d='M196 226 H130 V186'/%3E%3Cpath d='M66 12 V48'/%3E%3Cpath d='M104 226 V196 H150'/%3E%3C/g%3E%3Cg fill='%232e2e2e'%3E%3Ccircle cx='14' cy='30' r='3'/%3E%3Ccircle cx='160' cy='104' r='3'/%3E%3Ccircle cx='226' cy='20' r='3'/%3E%3Ccircle cx='140' cy='164' r='3'/%3E%3Ccircle cx='34' cy='218' r='3'/%3E%3Ccircle cx='78' cy='108' r='3'/%3E%3Ccircle cx='196' cy='226' r='3'/%3E%3Ccircle cx='150' cy='196' r='3'/%3E%3Ccircle cx='66' cy='12' r='3'/%3E%3Crect x='100' y='128' width='16' height='10'/%3E%3Crect x='182' y='58' width='10' height='16'/%3E%3C/g%3E%3C/svg%3E"); }
html[dir="rtl"] body{ font-family:Vazirmatn,Tahoma,"JetBrains Mono",monospace; }
html[dir="rtl"] *{ letter-spacing:0 !important; }
a{ color:inherit; text-decoration:none; border-bottom:1px solid var(--line); }
a:hover{ border-bottom-color:var(--ink); }
.dim{ color:var(--dim); }
.topbar{ max-width:1100px; margin:0 auto; padding:0 24px; }
.ssh-strip{ padding:8px 0; font-size:10.5px; letter-spacing:.06em; color:var(--dim);
  border-bottom:1px solid var(--line); text-transform:uppercase; }
.brand{ display:flex; align-items:center; gap:20px; padding:18px 0 20px;
  border-bottom:2px solid var(--ink); flex-wrap:wrap; }
.logo{ width:162px; height:162px; image-rendering:pixelated; border:1px solid var(--line); flex:none; }
h1{ font-size:21px; letter-spacing:.14em; text-transform:uppercase; margin:0; font-weight:700; }
.role{ font-size:10.5px; letter-spacing:.06em; color:var(--dim); text-transform:uppercase; margin-top:4px; }
.controls{ margin-left:auto; display:flex; gap:10px; }
html[dir="rtl"] .controls{ margin-left:0; margin-right:auto; }
.btn{ font-family:inherit; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  background:var(--ink); color:var(--paper); border:none; padding:8px 14px; cursor:pointer; }
.btn:hover{ opacity:.75; }
main{ max-width:1100px; margin:0 auto; padding:24px; }
.grid{ display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--line); border:1px solid var(--line); }
@media (max-width:820px){ .grid{ grid-template-columns:1fr; } }
.cell{ background:var(--paper); padding:22px 24px; }
.cell.wide{ grid-column:1 / -1; }
h2{ font-size:16.5px; letter-spacing:.16em; text-transform:uppercase;
  border-bottom:1px solid var(--line); padding-bottom:8px; margin:0 0 14px; }
.about-body{ display:flex; gap:18px; align-items:flex-start; }
html[dir="rtl"] .about-body{ flex-direction:row; }
.photo{ width:110px; height:110px; object-fit:cover; filter:grayscale(1);
  border:1px solid var(--line); flex:none; }
.bio{ margin:0; font-size:13px; white-space:pre-line; overflow:hidden; }
.skill{ display:flex; align-items:baseline; gap:10px; font-size:12px; margin:9px 0; }
.skill .k{ width:36%; flex:none; letter-spacing:.04em; }
.bar{ white-space:nowrap; letter-spacing:2px; }
.bar .fill{ color:var(--ink); }
.bar .track{ color:var(--dim); }
.pct{ color:var(--dim); font-size:11px; }
.tools{ margin-top:14px; font-size:10.5px; letter-spacing:.05em; color:var(--dim); }
ul{ list-style:none; margin:0; padding:0; }
li{ padding:7px 0; border-bottom:1px solid var(--line); font-size:12.5px; color:var(--ink); }

.cicon{ width:13px; height:13px; image-rendering:pixelated; vertical-align:-1px; margin-right:9px; }
html[dir="rtl"] .cicon{ margin-right:0; margin-left:9px; }
html[data-theme="dark"] .cicon{ filter:invert(1); }
.exp-item--sep{ border-bottom:1px solid var(--line); margin-bottom:12px; padding-bottom:12px; }
.exp-role{ font-size:13px; letter-spacing:.05em; text-transform:uppercase; }
.exp-dur{ font-size:11px; color:var(--dim); letter-spacing:.12em; margin:3px 0 8px; }
.exp-note{ font-size:12px; color:var(--dim); }
#proj{ display:grid; gap:10px; font-size:12px; }
.proj{ border:1px solid var(--line); padding:14px 16px; }
.proj-head{ display:flex; align-items:baseline; gap:12px; }
.idx{ font-size:10px; color:var(--dim); letter-spacing:.08em; }
.proj h3{ margin:0; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; }
.proj .link{ margin-left:auto; font-size:11px; letter-spacing:.08em; }
html[dir="rtl"] .proj .link{ margin-left:0; margin-right:auto; }
.proj .desc{ font-size:12px; color:var(--dim); margin-top:8px; }
.proj .tags{ font-size:10px; letter-spacing:.05em; color:var(--dim); margin-top:8px; }
.proj img{ max-width:240px; border:1px solid var(--line); filter:grayscale(1); margin-top:10px; }
footer{ max-width:1100px; margin:0 auto 56px; padding:20px 24px;
  border-top:2px solid var(--ink); display:flex; flex-direction:column; gap:8px; }
.more{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; align-self:flex-start; }
.foot-line{ font-size:10.5px; color:var(--dim); letter-spacing:.05em; }
.teapot main{ max-width:640px; margin:60px auto; text-align:center; }
.teapot pre{ text-align:left; display:inline-block; font-size:13px; line-height:1.5; }
.teapot h1.tp{ font-size:64px; letter-spacing:.2em; }
.teapot .btn{ display:inline-block; margin-top:18px; }