/* PyCourse — لایه‌ی طراحیِ مشترکِ خانه (/) و تور (/tour/).
   هر چیزی زیرِ ریشه‌ی `.hx` است (نه سراسری)، تا به بقیه‌ی سایت نشت نکند.
   بدونِ منبعِ خارجی: فونت Vazirmatn محلی است؛ رنگ‌ها توکن‌اند و برای رنگِ پویا از
   `rgba(var(--sc-r),a)` استفاده می‌شود (سه‌تاییِ جداشده با ویرگول؛ نوشتنِ همان سه‌تایی با اسلشِ آلفا در rgb نامعتبر است) (نه color-mix) تا در مرورگرهای قدیمی‌تر هم
   افت نکند. حرفِ اضافه‌ی Latin فقط روی متنِ لاتین (letter-spacing و stroke روی
   حروفِ فارسی چسبیده‌ی به‌هم را می‌شکند). */
@font-face{font-family:'Vazirmatn';src:url('../fonts/Vazirmatn.woff2') format('woff2-variations');font-weight:300 900;font-style:normal;font-display:swap}

html{color-scheme:dark}
html[data-theme="light"]{color-scheme:light}
body.hx-body{margin:0;background:#0a0e17}
html[data-theme="light"] body.hx-body{background:#f5f7fb}

.hx{
  --bg:#0a0e17;--bg-r:10,14,23;--surface:#121a2b;--surface-2:#0e1626;--ink:#060a11;
  --line:#1f2839;--line-2:#2c374c;
  --text:#e9eff8;--muted:#9aa9bf;--dim:#7d8da3;
  --primary:#2dd7f0;--primary-2:#65e4f5;--on-primary:#04161d;
  --ok:#3ddc97;--err:#f34546;
  --c0:#65e4f5;--c1:#4783ff;--c2:#2fbf9b;--c3:#8c5dff;--c4:#efa103;--c5:#f34546;--c6:#3fd8e0;
  --c0r:101,228,245;--c1r:71,131,255;--c2r:47,191,155;--c3r:140,93,255;--c4r:239,161,3;--c5r:243,69,70;--c6r:63,216,224;
  --stop:#65e4f5;--sc:#65e4f5;--sc-r:101,228,245;
  --fx-grid:.5;--fx-scan:1;--fx-noise:.07;--dots:101,228,245;
  --r:22px;--r-sm:14px;--pill:999px;
  --gut:clamp(16px,4vw,56px);--headh:68px;
  --font-fa:"Vazirmatn",Tahoma,system-ui,sans-serif;
  --mono:ui-monospace,"JetBrains Mono",Menlo,Consolas,monospace;
  --t1:.16s;--t2:.34s;--t3:.7s;
  --e1:cubic-bezier(.2,.8,.2,1);--e2:cubic-bezier(.5,0,.15,1);--e3:cubic-bezier(.7,0,.2,1);
  background:var(--bg);color:var(--text);
  font-family:var(--font-fa);font-size:16px;line-height:1.85;
  position:relative;overflow-x:clip;-webkit-text-size-adjust:100%;
}
.hx[data-theme="light"]{
  --bg:#f5f7fb;--bg-r:245,247,251;--surface:#ffffff;--surface-2:#eaeff7;--ink:#e3e9f3;
  --line:#dbe2ee;--line-2:#c3cee1;
  --text:#0c1420;--muted:#4a586e;--dim:#66728a;
  --primary:#0b7f96;--primary-2:#12a3bd;--on-primary:#ffffff;
  --ok:#0f8a5c;--err:#c62a2b;
  --c0:#0b7f96;--c1:#2a5fd6;--c2:#128a6c;--c3:#6a3fd0;--c4:#9c6a00;--c5:#c62a2b;--c6:#0e8fa8;
  --c0r:11,127,150;--c1r:42,95,214;--c2r:18,138,108;--c3r:106,63,208;--c4r:156,106,0;--c5r:198,42,43;--c6r:14,143,168;
  --stop:#0b7f96;--sc:#0b7f96;--sc-r:11,127,150;
  --fx-grid:.35;--fx-scan:0;--fx-noise:0;--dots:11,95,130;
}
.hx *,.hx *::before,.hx *::after{box-sizing:border-box}
:where(.hx h1,.hx h2,.hx h3,.hx h4,.hx p,.hx ol,.hx ul,.hx dl,.hx dd,.hx figure,.hx pre){margin:0;padding:0}
:where(.hx ol,.hx ul){list-style:none}
:where(.hx a){color:inherit;text-decoration:none}
:where(.hx button,.hx input,.hx select,.hx summary){font:inherit;color:inherit}
.hx :focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:8px}
.hx [hidden]{display:none!important}
.hx-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hx-ltr{direction:ltr;unicode-bidi:isolate}
.hx-mono{font-family:var(--mono);direction:ltr;unicode-bidi:isolate}

/* ---------- accent helpers: set the section colour once ---------- */
.hx-c0{--sc:var(--c0);--sc-r:var(--c0r)}.hx-c1{--sc:var(--c1);--sc-r:var(--c1r)}
.hx-c2{--sc:var(--c2);--sc-r:var(--c2r)}.hx-c3{--sc:var(--c3);--sc-r:var(--c3r)}
.hx-c4{--sc:var(--c4);--sc-r:var(--c4r)}.hx-c5{--sc:var(--c5);--sc-r:var(--c5r)}
.hx-c6{--sc:var(--c6);--sc-r:var(--c6r)}

/* ---------- global fx layers ---------- */
.hx-fx{position:fixed;inset:0;pointer-events:none}
.hx-canvas{z-index:0;width:100%;height:100%;display:block}
.hx-grid{z-index:1;opacity:var(--fx-grid);
  background:linear-gradient(var(--line) 1px,transparent 1px) 0 0/72px 72px,linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/72px 72px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 45%,transparent 12%,#000 88%);mask-image:radial-gradient(ellipse at 50% 45%,transparent 12%,#000 88%)}
.hx-vig{z-index:2;background:radial-gradient(ellipse at center,transparent 50%,rgba(var(--bg-r),.82) 100%)}
.hx-scan{z-index:60;opacity:var(--fx-scan);mix-blend-mode:overlay;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.022) 0 1px,transparent 1px 3px)}
.hx-noise{z-index:61;opacity:var(--fx-noise);
  background-image:url("noise.svg")}
.hx-main{position:relative;z-index:5}

/* ---------- progress / hud / rail ---------- */
.hx-progress{position:fixed;inset-block-start:0;inset-inline:0;height:3px;z-index:52;transform-origin:100% 50%;
  transform:scaleX(var(--p,0));background:linear-gradient(270deg,var(--c1),var(--c0),var(--c3),var(--c4))}
.hx-hud{position:fixed;z-index:40;font-size:12px;color:var(--dim);pointer-events:none;display:flex;align-items:center;gap:12px}
.hx-hud-l{inset-inline-start:var(--gut);inset-block-end:16px}
.hx-hud-l b{font-family:var(--font-fa);font-weight:800;font-size:26px;line-height:1;color:var(--sc);transition:color var(--t3) var(--e1)}
.hx-hud-l span{font-weight:600}
.hx-hud-r{left:var(--gut);inset-block-end:16px;font-family:var(--mono);direction:ltr}
.hx-hud-r i{font-style:normal;color:var(--sc)}
.hx-rail{position:fixed;inset-inline-end:12px;align-items:flex-end;inset-block-start:50%;transform:translateY(-50%);z-index:40;
  display:flex;flex-direction:column;gap:12px}
.hx-rail a{display:flex;flex-direction:row-reverse;align-items:center;justify-content:flex-start;gap:10px;width:max-content;font-size:12px;font-weight:600;
  color:transparent;transition:color var(--t2) var(--e1);min-height:20px}
.hx-rail a i{width:9px;height:9px;border:1.5px solid var(--dim);transform:rotate(45deg);transition:all var(--t2) var(--e1);flex:none}
.hx-rail a:hover{color:var(--muted)}
.hx-rail a[aria-current="true"]{color:var(--text)}
.hx-rail a[aria-current="true"] i{background:var(--sc);border-color:var(--sc);box-shadow:0 0 12px rgba(var(--sc-r),.9)}
@media (max-width:980px){.hx-rail,.hx-hud-r{display:none}}
@media (max-width:760px){.hx-hud{display:none}}

/* ---------- header ---------- */
.hx-head{position:fixed;inset-block-start:0;inset-inline:0;z-index:50;display:flex;align-items:center;gap:14px;
  padding:12px var(--gut);background:linear-gradient(180deg,rgba(var(--bg-r),.92),rgba(var(--bg-r),0));min-height:var(--headh)}
.hx-logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px}
.hx-logo-p{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;
  background:linear-gradient(135deg,var(--primary-2),var(--primary));color:var(--on-primary);
  font-family:var(--mono);font-weight:700;font-size:16px;direction:ltr}
.hx-links{display:flex;gap:2px;padding:5px;border:1px solid var(--line-2);border-radius:var(--pill);
  background:rgba(var(--bg-r),.62);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);margin-inline:auto}
.hx-links a{padding:7px 14px;border-radius:var(--pill);font-size:13.5px;font-weight:600;color:var(--muted);white-space:nowrap;
  transition:color var(--t1),background var(--t1)}
.hx-links a:hover{color:var(--text)}
.hx-links a[aria-current="true"]{background:var(--primary);color:var(--on-primary)}
.hx-actions{display:flex;gap:8px;align-items:center;margin-inline-start:auto}
.hx-links+.hx-actions{margin-inline-start:0}
.hx-pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px;border-radius:var(--pill);
  border:1px solid var(--line-2);background:rgba(var(--bg-r),.5);color:var(--muted);font-size:14px;font-weight:700;white-space:nowrap;cursor:pointer;
  transition:color var(--t1),border-color var(--t1),transform var(--t1)}
.hx-pill:hover{color:var(--text);border-color:var(--muted)}
.hx-pill:active{transform:translateY(1px)}
.hx-pill--p{background:linear-gradient(135deg,var(--primary-2),var(--primary));color:var(--on-primary);border-color:transparent}
.hx-pill--p:hover{color:var(--on-primary);filter:brightness(1.06)}
.hx-theme{width:44px;padding:0}
.hx-theme svg{width:18px;height:18px;display:block}
@media (max-width:1100px){.hx-links{display:none}.hx-actions{margin-inline-start:auto}}
@media (max-width:520px){.hx-pill{padding:0 12px;font-size:13.5px}.hx-pill-hide{display:none}}
@media (max-width:380px){.hx-logo-t{display:none}}
.hx-skip{position:absolute;inset-block-start:-100px;inset-inline-start:12px;z-index:99;background:var(--primary);color:var(--on-primary);
  padding:10px 16px;border-radius:12px;font-weight:800}
.hx-skip:focus{inset-block-start:12px}

/* ---------- type ---------- */
.hx-tag{display:inline-flex;align-items:center;gap:12px;font-size:14px;font-weight:700;color:var(--sc)}
.hx-tag::before{content:"";width:30px;height:2px;background:currentColor;border-radius:2px}
.hx-h2{font-size:clamp(30px,5.4vw,68px);line-height:1.2;font-weight:900;letter-spacing:0}
.hx-h2 em{font-style:normal;background:linear-gradient(100deg,var(--c0),var(--c3));-webkit-background-clip:text;background-clip:text;color:transparent}
.hx-lead{color:var(--muted);font-size:clamp(15.5px,1.7vw,19.5px);max-width:58ch;margin-block-start:14px}
.hx-ghost{position:absolute;z-index:-1;font-family:var(--mono);font-weight:800;font-size:clamp(120px,22vw,340px);line-height:.8;
  color:transparent;-webkit-text-stroke:1px rgba(var(--sc-r),.16);direction:ltr;pointer-events:none;user-select:none}
.hx-wrap{max-width:1240px;margin-inline:auto;padding-inline:var(--gut)}

/* ---------- buttons / chips / status ---------- */
.hx-btn{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;
  border-radius:12px;border:1px solid var(--primary);background:transparent;color:var(--text);font-weight:800;font-size:15px;cursor:pointer;overflow:hidden;
  transition:color .3s var(--e1),transform var(--t1)}
.hx-btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--primary);transform:translateX(101%);transition:transform .4s var(--e3)}
.hx-btn:hover{color:var(--on-primary)}
.hx-btn:hover::before{transform:none}
.hx-btn:active{transform:translateY(1px)}
.hx-btn--p{background:linear-gradient(135deg,var(--primary-2),var(--primary));color:var(--on-primary);border-color:transparent}
.hx-btn--p::before{background:var(--text)}
.hx-btn--p:hover{color:var(--bg)}
.hx-btn--sm{min-height:40px;padding:0 16px;font-size:13.5px;border-radius:10px}
.hx-cta{display:flex;flex-wrap:wrap;gap:12px}
.hx-chips{display:flex;flex-wrap:wrap;gap:8px}
.hx-chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;padding:3px 12px;border-radius:var(--pill);
  border:1px solid var(--line-2);background:rgba(var(--bg-r),.55);color:var(--text);white-space:nowrap}
.hx-chip--sc{border-color:rgba(var(--sc-r),.45);color:var(--sc)}
.hx-status{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;padding:3px 12px;border-radius:var(--pill);
  color:var(--ok);border:1px solid rgb(61 220 151/.4);background:rgb(61 220 151/.08)}
.hx-status::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor;animation:hx-blink 1.4s steps(2) infinite}
@keyframes hx-blink{50%{opacity:.25}}

/* ---------- window frame (demo surfaces) ---------- */
.hx-win{position:relative;background:linear-gradient(165deg,var(--surface),var(--surface-2));border:1px solid var(--line-2);border-radius:var(--r);
  overflow:hidden;box-shadow:0 36px 90px -36px rgba(var(--sc-r),.55),0 0 0 1px rgb(255 255 255/.02) inset}
.hx-win::before,.hx-win::after{content:"";position:absolute;width:16px;height:16px;border:0 solid var(--sc);z-index:2;pointer-events:none}
.hx-win::before{inset-block-start:-1px;inset-inline-start:-1px;border-block-start-width:2px;border-inline-start-width:2px;border-start-start-radius:var(--r)}
.hx-win::after{inset-block-end:-1px;inset-inline-end:-1px;border-block-end-width:2px;border-inline-end-width:2px;border-end-end-radius:var(--r)}
.hx-win-bar{display:flex;align-items:center;gap:10px;padding:10px 14px;border-block-end:1px solid var(--line);background:rgba(var(--bg-r),.35);font-size:12.5px;color:var(--dim)}
.hx-dots{display:flex;gap:6px}
.hx-dots i{display:block;width:9px;height:9px;border-radius:50%;background:var(--line-2)}
.hx-dots i:nth-child(1){background:#ff5f57}.hx-dots i:nth-child(2){background:#febc2e}.hx-dots i:nth-child(3){background:#28c840}
.hx-win-f{font-family:var(--mono);direction:ltr;color:var(--muted);font-size:12px}
.hx-win-tag{margin-inline-start:auto;font-size:11px;font-weight:700;color:var(--sc);border:1px solid rgba(var(--sc-r),.4);border-radius:var(--pill);padding:1px 10px;white-space:nowrap}
.hx-win-body{padding:18px}

/* ---------- marquee ---------- */
.hx-marq{position:relative;z-index:6;overflow:hidden;padding:34px 0;direction:ltr}
.hx-marq-row{display:flex;width:max-content;font-weight:900;font-size:clamp(30px,5.2vw,74px);line-height:1.5;white-space:nowrap;padding-block:2px;
  animation:hx-marq 38s linear infinite}
.hx-marq-row.b{animation-direction:reverse;animation-duration:46s;font-family:var(--mono);font-size:clamp(26px,4.4vw,62px);font-weight:800;line-height:1.45}
.hx-marq-band{transform:rotate(-2deg) scale(1.04);background:linear-gradient(90deg,var(--primary),var(--c1));color:var(--on-primary)}
.hx-marq-band.b{transform:rotate(1.6deg) scale(1.04);margin-block-start:-8px;background:linear-gradient(90deg,var(--c3),var(--c1));color:#fff}
.hx[data-theme="light"] .hx-marq-band{color:#fff}
.hx-marq-row>span{display:flex;gap:.7em;padding-inline-end:.7em;flex:none;direction:rtl}
.hx-marq-row.b>span{direction:ltr}
.hx-marq-row i{font-style:normal;opacity:.55}
@keyframes hx-marq{to{transform:translateX(-50%)}}

/* ---------- reveal ---------- */
.hx-js .hx-rv{opacity:0;transform:translateY(20px);transition:opacity var(--t3) var(--e1) var(--d,0ms),transform var(--t3) var(--e1) var(--d,0ms)}
.hx-js .hx-rv.in{opacity:1;transform:none}
.hx-w{transition:opacity .25s linear,color .25s linear}
.hx-js .hx-words .hx-w{opacity:.16}
.hx-js .hx-words .hx-w.on{opacity:1}

/* ---------- boot overlay (JS-created, first visit per session) ---------- */
#hx-boot{position:fixed;inset:0;z-index:200;background:var(--bg);display:flex;flex-direction:column;justify-content:flex-end;gap:18px;
  padding:var(--gut);cursor:pointer;transition:opacity .5s var(--e1),transform .6s var(--e3)}
#hx-boot.out{opacity:0;transform:translateY(-6%);pointer-events:none}
#hx-boot .log{font-family:var(--mono);direction:ltr;text-align:left;font-size:clamp(11px,1.3vw,14px);color:var(--dim);white-space:pre-wrap;min-height:11em;line-height:1.9}
#hx-boot .log b{color:var(--c0);font-weight:500}
#hx-boot .log i{color:var(--ok);font-style:normal}
#hx-boot .big{font-family:var(--mono);direction:ltr;text-align:left;font-weight:800;font-size:clamp(48px,13vw,200px);line-height:.9;letter-spacing:-.04em}
#hx-boot .big span{color:transparent;-webkit-text-stroke:1.5px var(--c0)}
#hx-boot .bar{height:3px;background:var(--line);position:relative;overflow:hidden}
#hx-boot .bar i{position:absolute;inset:0;transform-origin:100% 50%;transform:scaleX(0);background:linear-gradient(270deg,var(--c1),var(--c0),var(--c3),var(--c4))}
#hx-boot .meta{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--dim)}

/* ---------- latest public posts (HX.messages) ---------- */
.hx-msgs{min-height:200px}
.hx-msg{display:grid;grid-template-columns:38px 1fr;gap:12px;padding:14px 0;border-block-end:1px solid var(--line)}
.hx-msg:last-child{border-block-end:0}
.hx-msg.new{animation:hx-slide .5s var(--e1)}
@keyframes hx-slide{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
.hx-msg .av{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-weight:700;font-size:15px;color:#06121a}
.hx-msg .h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.hx-msg .h b{font-size:14px}
.hx-msg .h time{font-size:12px;color:var(--dim)}
.hx-msg p{font-size:14.5px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.hx-skelrow{display:grid;grid-template-columns:38px 1fr;gap:12px;padding:14px 0;align-items:center}
.hx-skel{height:14px;border-radius:7px;background:linear-gradient(90deg,var(--surface-2),var(--line),var(--surface-2));
  background-size:200% 100%;animation:hx-sk 1.4s linear infinite;margin-block:6px}
.hx-skelav{width:38px;height:38px;border-radius:12px;margin:0}
.hx-skel.w34{width:34%}.hx-skel.w78{width:78%}
@keyframes hx-sk{0%{background-position:200% 0}100%{background-position:-200% 0}}
.hx-note{font-size:12.5px;color:var(--dim);margin-block-start:12px}
.hx-warn{font-size:12.5px;color:var(--c4);margin-block-start:6px}
.hx-empty{color:var(--dim);font-size:14px;padding:26px 0;text-align:center}

/* ---------- misc ---------- */
.hx-tilt{transform-style:preserve-3d;transition:transform .25s var(--e1);will-change:transform}
@media (hover:none),(pointer:coarse){.hx-tilt{transform:none!important}}

@media (prefers-reduced-motion:reduce){
  .hx *,.hx *::before,.hx *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .hx-js .hx-rv{opacity:1;transform:none}
  .hx-js .hx-words .hx-w{opacity:1}
  .hx-marq-row{animation:none}
  #hx-boot{display:none}
}