/* PyCourse — تور (/tour/) : پوششِ طراحیِ hx روی ساختارِ ایستگاه‌ها (home-tour.css).
   لایه‌ی مشترک: hx.css. بدونِ منبعِ خارجی؛ رنگِ پویا با rgba(var(--x-r),a). */

/* رنگِ سه‌تاییِ هر ایستگاه (برای سایه/حاشیه‌ی rgba) */
.hp-stop[data-color="var(--c0)"]{--sc-r:var(--c0r)}.hp-stop[data-color="var(--c1)"]{--sc-r:var(--c1r)}
.hp-stop[data-color="var(--c2)"]{--sc-r:var(--c2r)}.hp-stop[data-color="var(--c3)"]{--sc-r:var(--c3r)}
.hp-stop[data-color="var(--c4)"]{--sc-r:var(--c4r)}.hp-stop[data-color="var(--c5)"]{--sc-r:var(--c5r)}
.hp-stop[data-color="var(--c6)"]{--sc-r:var(--c6r)}

/* محتوا بالای ذرات و جلوه‌ها؛ ایستگاه‌ها شفاف تا ذرات دیده شوند */
.hp-main{position:relative;z-index:5}
.hp-header{background:rgba(var(--bg-r),.78)}
.hx-hud-l b{color:var(--stop)}
.hx-hud-r i{color:var(--stop)}

/* پنجره‌ی دمو: قابِ گوشه‌دار و درخششِ هم‌رنگِ ایستگاه */
.hp-demo{position:relative;background:linear-gradient(165deg,var(--surface),var(--surface-2));border-color:var(--line-2);
  box-shadow:0 36px 90px -40px rgba(var(--sc-r,101,228,245),.5)}
.hp-demo::before,.hp-demo::after{content:"";position:absolute;width:16px;height:16px;border:0 solid var(--sc);z-index:2;pointer-events:none}
.hp-demo::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)}
.hp-demo::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)}

/* تیترِ ایستگاه: درشت‌تر، با تأکیدِ رنگی */
.hp-stop h2{font-weight:900;letter-spacing:0}
.hp-kicker .hp-kn{padding:1px 8px;border:1px solid rgba(var(--sc-r,101,228,245),.45);border-radius:6px}

/* ---------------- ایستگاهِ ابزارها ---------------- */
.tl-json{display:grid;gap:10px}
.tl-lb{font-size:12.5px;color:var(--dim);font-weight:700}
.tl-ta{width:100%;resize:vertical;min-height:92px;padding:12px 14px;border:1px solid var(--line-2);border-radius:12px;
  background:rgba(var(--bg-r),.55);color:var(--text);font-family:var(--mono);font-size:13px;line-height:1.7;text-align:left;direction:ltr}
.tl-ta:focus{border-color:var(--sc);outline:none;box-shadow:0 0 0 3px rgba(var(--sc-r,101,228,245),.25)}
.tl-out{min-height:120px;max-height:240px;overflow:auto;border:1px dashed var(--line-2);border-radius:12px;background:rgba(var(--bg-r),.4);font-size:12.5px;line-height:1.8;white-space:pre}
.hp-out.err{color:var(--err)}
.hp-out.ok{color:var(--ok)}
.tl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin-block-start:34px}
.tl-card a{display:grid;grid-template-columns:44px 1fr;grid-template-areas:"ic t" "ic d" "kd kd";gap:2px 12px;height:100%;padding:16px;
  border:1px solid var(--line-2);border-radius:18px;background:linear-gradient(165deg,rgba(var(--bg-r),.8),rgba(var(--bg-r),.5));
  transition:border-color var(--t2) var(--e1),transform var(--t2) var(--e1)}
.tl-card a:hover{border-color:rgba(var(--sc-r,101,228,245),.7);transform:translateY(-3px)}
.tl-card .ic{grid-area:ic;display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:rgba(var(--sc-r,101,228,245),.14);font-size:22px}
.tl-card b{grid-area:t;font-size:15.5px;font-weight:800;align-self:end}
.tl-card b em{font-style:normal;font-size:11px;font-weight:800;color:var(--c4);border:1px solid rgba(var(--c4r),.5);border-radius:99px;padding:0 8px;margin-inline-start:6px}
.tl-card .ds{grid-area:d;font-size:13px;color:var(--muted);line-height:1.75}
.tl-card .kd{grid-area:kd;margin-block-start:10px;font-size:11.5px;font-weight:700;color:var(--sc)}

@media (prefers-reduced-motion:reduce){.tl-card a{transition:none}}