/* إضافات الموقع فوق تصميم المختبر الأصلي (lab.css): التنقل، التنبيه، التذييل، الجولة التعريفية، الصفحة الرئيسية وصفحة «عن المختبر».
   كل الألوان والخطوط من نفس متغيرات lab.css. */

a{color:var(--accent)}
a.btn{text-decoration:none}

/* ---------- nav ---------- */
.nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.nav-links{display:flex;gap:2px;flex-wrap:wrap}
.nav-links a{padding:5px 13px;border-radius:999px;color:var(--ink-2);text-decoration:none;font-weight:600;font-size:14px;line-height:1.6}
.nav-links a:hover{color:var(--ink);background:var(--surface-2)}
.nav-links a[aria-current="page"]{background:var(--accent-wash);color:var(--accent)}
.nav-actions{display:flex;gap:6px;flex-wrap:wrap}

/* ---------- educational notice ---------- */
.notice{display:flex;gap:10px;align-items:flex-start;margin:0 0 16px;padding:9px 14px;border-radius:12px;font-size:14px;line-height:1.7;color:var(--ink);
  background:color-mix(in srgb,var(--warn) 11%,var(--surface));border:1px solid color-mix(in srgb,var(--warn) 45%,var(--line))}
.notice svg{width:18px;height:18px;flex:none;color:var(--warn);margin-top:3px}

/* ---------- footer ---------- */
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 24px;margin-top:28px;padding-top:14px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}

/* ---------- guided tour ---------- */
.tour-ring{position:fixed;z-index:1000;border-radius:14px;pointer-events:none;box-shadow:0 0 0 3px var(--accent),0 0 0 200vmax rgba(8,12,13,.58);transition:top .25s,left .25s,width .25s,height .25s}
.tour-pop{position:fixed;z-index:1001;width:min(350px,calc(100vw - 24px));background:var(--surface);color:var(--ink);border:1px solid var(--line-2);border-radius:14px;box-shadow:var(--shadow),0 10px 40px rgba(0,0,0,.25);padding:14px 16px 12px}
.tour-pop.welcome{inset-inline-start:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px))}
.tour-pop .tp-n{font-family:var(--font-mono);font-size:12px;color:var(--muted)}
.tour-pop h3{font-family:var(--font-display);font-size:16px;margin:2px 0 4px;line-height:1.5}
.tour-pop p{margin:0 0 12px;font-size:14px;color:var(--ink-2);text-wrap:pretty}
.tour-pop .tp-b{display:flex;gap:6px;align-items:center}
.tour-pop .tp-b .grow{flex:1}

/* ---------- landing & about ---------- */
.page.narrow{max-width:1040px}
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:28px 36px;align-items:center;margin:26px 0 34px}
@media (max-width:820px){.hero{grid-template-columns:minmax(0,1fr);margin-top:14px}}
.hero h1{font-family:var(--font-display);font-weight:800;font-size:clamp(28px,4.6vw,44px);line-height:1.35;margin:0 0 10px;text-wrap:balance}
.hero .lead{font-size:17px;color:var(--ink-2);margin:0 0 20px;max-width:56ch;text-wrap:pretty}
.hero .cta{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.btn.lg{font-size:16px;padding:11px 22px;border-radius:12px}
.hero-art{background:linear-gradient(180deg,var(--vp-top) 0%,var(--vp-bot) 100%);border:1px solid var(--line);border-radius:16px;padding:10px;direction:ltr}
.hero-art svg{display:block;width:100%;height:auto}
.sec-h{font-family:var(--font-display);font-size:20px;font-weight:700;margin:34px 0 12px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.cards .card h3{font-family:var(--font-display);font-size:15.5px;margin:0 0 4px;line-height:1.5}
.cards .card p{margin:0;font-size:14px;color:var(--ink-2);text-wrap:pretty}
.cards .card .ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--accent-wash);color:var(--accent);margin-bottom:8px}
.cards .card .ic svg{width:17px;height:17px}
.quick{display:flex;flex-wrap:wrap;gap:8px}
.quick a{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);text-decoration:none;font-size:14px;font-weight:600}
.quick a:hover{border-color:var(--accent)}
.quick a i{width:10px;height:10px;border-radius:50%;background:var(--qc)}
.prose{max-width:74ch}
.prose h1{font-family:var(--font-display);font-weight:800;font-size:clamp(24px,3.4vw,32px);line-height:1.4;margin:18px 0 8px}
.prose h2{font-family:var(--font-display);font-size:19px;font-weight:700;margin:28px 0 8px}
.prose p{margin:0 0 12px;color:var(--ink-2);text-wrap:pretty}
.prose ul{margin:0 0 12px;padding-inline-start:22px;color:var(--ink-2);display:grid;gap:6px}
.prose li bdi{font-family:var(--font-mono);font-size:13.5px;color:var(--ink)}
.owner{display:flex;gap:14px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 18px;max-width:420px}
.owner .av{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--accent-ink);font-family:var(--font-display);font-weight:800;font-size:20px;flex:none}
.owner b{display:block;font-family:var(--font-display);font-size:16px}
.owner span{font-size:13.5px;color:var(--muted)}