diff --git a/frontend/sitemap.html b/frontend/sitemap.html
index 8a45ee0..4a9798e 100644
--- a/frontend/sitemap.html
+++ b/frontend/sitemap.html
@@ -9,347 +9,211 @@
   <link rel="stylesheet" href="/css/ls.css" />
   <script src="https://cdn.jsdelivr.net/npm/lucide@0.469.0/dist/umd/lucide.min.js"></script>
   <style>
-    .sb-content { background: var(--bg); }
+    .sb-content { overflow: hidden !important; background: #09061c !important; padding: 0 !important; }
 
-    /* ── Hero ── */
-    .sm-hero {
-      position: relative;
-      min-height: 48vh;
-      display: flex; flex-direction: column;
-      align-items: center; justify-content: center;
-      text-align: center;
-      padding: 72px 32px 56px;
-      overflow: hidden;
-      background: linear-gradient(160deg, #f8f6ff 0%, #eef2ff 60%, #f0f9ff 100%);
-      border-bottom: 1px solid var(--border);
+    .gx-wrap {
+      position: relative; width: 100%; height: 100%;
+      overflow: hidden; user-select: none;
     }
-    .sm-hero::before {
+
+    /* ── Canvas background ── */
+    #gx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
+
+    /* ── Nodes layer ── */
+    #gx-nodes { position: absolute; inset: 0; z-index: 2; }
+
+    /* ── Node ── */
+    .gx-node {
+      position: absolute;
+      transform: translate(-50%, -50%);
+      display: flex; flex-direction: column; align-items: center; gap: 7px;
+      cursor: pointer;
+      animation: gxNodeIn 0.55s ease both;
+    }
+    @keyframes gxNodeIn {
+      from { opacity: 0; transform: translate(-50%, -45%) scale(0.55); }
+      to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
+    }
+
+    .gx-orb {
+      border-radius: 50%;
+      background: radial-gradient(circle at 38% 32%, rgba(var(--nc), 0.42), rgba(var(--nc), 0.07) 72%);
+      border: 1.5px solid rgba(var(--nc), 0.42);
+      box-shadow: 0 0 14px rgba(var(--nc), 0.16), inset 0 1px 0 rgba(255,255,255,0.13);
+      display: flex; align-items: center; justify-content: center;
+      width: 50px; height: 50px;
+      transition: transform 0.22s cubic-bezier(.34,1.56,.64,1), box-shadow 0.22s, border-color 0.22s;
+      position: relative;
+    }
+    .gx-orb svg { width: 20px; height: 20px; color: rgb(var(--nc)); stroke: rgb(var(--nc)); flex-shrink: 0; }
+
+    .gx-node:hover .gx-orb {
+      transform: scale(1.25);
+      box-shadow: 0 0 32px rgba(var(--nc), 0.6), 0 0 64px rgba(var(--nc), 0.18), inset 0 1px 0 rgba(255,255,255,0.2);
+      border-color: rgba(var(--nc), 0.85);
+    }
+    .gx-node.gx-main .gx-orb { width: 66px; height: 66px; }
+    .gx-node.gx-main .gx-orb svg { width: 26px; height: 26px; }
+
+    /* Pulse ring on main node */
+    .gx-node.gx-main .gx-orb::after {
       content: '';
-      position: absolute; inset: 0;
-      background-image: radial-gradient(circle, rgba(15,23,42,0.045) 1px, transparent 1px);
-      background-size: 22px 22px;
+      position: absolute; inset: -8px; border-radius: 50%;
+      border: 1.5px solid rgba(var(--nc), 0.22);
+      animation: gxPulse 2.4s ease-in-out infinite;
+    }
+    @keyframes gxPulse {
+      0%,100% { transform: scale(1); opacity: 0.6; }
+      50%       { transform: scale(1.12); opacity: 0.15; }
+    }
+
+    .gx-label {
+      font-family: 'Manrope', sans-serif;
+      font-size: 0.68rem; font-weight: 700;
+      color: rgba(255,255,255,0.68);
+      text-shadow: 0 1px 8px rgba(0,0,0,0.7);
+      white-space: nowrap;
+      transition: color 0.18s;
+    }
+    .gx-node:hover .gx-label { color: rgba(255,255,255,0.95); }
+
+    /* Dim non-category nodes on filter */
+    .gx-node.gx-dim { opacity: 0.12; transition: opacity 0.3s; }
+    .gx-node.gx-connected .gx-orb {
+      box-shadow: 0 0 20px rgba(var(--nc), 0.35), inset 0 1px 0 rgba(255,255,255,0.13);
+    }
+
+    /* Category colors */
+    .gx-node[data-cat="study"]    { --nc: 155,93,229; }
+    .gx-node[data-cat="practice"] { --nc: 6,214,224; }
+    .gx-node[data-cat="games"]    { --nc: 241,91,181; }
+    .gx-node[data-cat="personal"] { --nc: 255,179,71; }
+
+    /* ── Tooltip ── */
+    .gx-tt {
+      position: fixed; z-index: 300;
+      background: rgba(10,6,24,0.95);
+      backdrop-filter: blur(24px) saturate(1.4);
+      border: 1px solid rgba(255,255,255,0.09);
+      border-radius: 18px;
+      padding: 15px 17px 17px;
+      width: 238px;
+      pointer-events: none;
+      opacity: 0; transform: translateY(8px) scale(0.97);
+      transition: opacity 0.18s, transform 0.18s;
+      box-shadow: 0 20px 56px rgba(0,0,0,0.55);
+    }
+    .gx-tt.vis { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
+
+    .gx-tt-badge {
+      display: inline-flex; align-items: center;
+      font-size: 0.59rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
+      padding: 2px 9px; border-radius: 99px; margin-bottom: 9px;
+    }
+    .gx-tt-title {
+      font-family: 'Unbounded', sans-serif;
+      font-size: 0.83rem; font-weight: 800; color: #fff; margin-bottom: 7px; line-height: 1.2;
+    }
+    .gx-tt-desc {
+      font-size: 0.75rem; color: rgba(255,255,255,0.5); line-height: 1.55; margin-bottom: 13px;
+    }
+    .gx-tt-btn {
+      display: inline-flex; align-items: center; gap: 7px;
+      font-size: 0.73rem; font-weight: 700;
+      padding: 7px 16px; border-radius: 99px;
+      text-decoration: none; transition: filter 0.18s;
+    }
+    .gx-tt-btn:hover { filter: brightness(1.15); }
+    .gx-tt-btn svg { width: 12px; height: 12px; }
+
+    /* ── Header ── */
+    .gx-hdr {
+      position: absolute; top: 0; left: 0; right: 0; z-index: 10;
+      padding: 18px 28px;
+      background: linear-gradient(to bottom, rgba(9,6,28,0.88) 0%, transparent 100%);
+      display: flex; align-items: center; gap: 20px;
       pointer-events: none;
     }
-    .sm-blob {
-      position: absolute; border-radius: 50%;
-      pointer-events: none; animation: blobFloat 9s ease-in-out infinite;
-    }
-    .sm-blob-1 { width: 500px; height: 500px; background: radial-gradient(circle, rgba(155,93,229,0.12), transparent 65%); top: -180px; right: -120px; animation-delay: 0s; }
-    .sm-blob-2 { width: 360px; height: 360px; background: radial-gradient(circle, rgba(6,214,224,0.09), transparent 65%); bottom: -140px; left: 5%; animation-delay: -3.5s; }
-    .sm-blob-3 { width: 220px; height: 220px; background: radial-gradient(circle, rgba(241,91,181,0.08), transparent 65%); top: 30%; left: -80px; animation-delay: -6s; }
-    @keyframes blobFloat {
-      0%,100% { transform: translate(0,0) scale(1); }
-      33%      { transform: translate(18px,-28px) scale(1.04); }
-      66%      { transform: translate(-12px,18px) scale(0.97); }
-    }
-
-    .sm-hero-content { position: relative; z-index: 1; max-width: 680px; }
-
-    .sm-hero-badge {
-      display: inline-flex; align-items: center; gap: 6px;
-      background: rgba(155,93,229,0.09);
-      border: 1px solid rgba(155,93,229,0.25);
-      color: #7c3aed;
-      font-size: 0.72rem; font-weight: 700;
-      letter-spacing: 0.1em; text-transform: uppercase;
-      padding: 5px 14px; border-radius: 99px;
-      margin-bottom: 24px;
-      animation: fadeUp 0.5s ease both;
-    }
-
-    .sm-hero-title {
+    .gx-hdr-logo {
       font-family: 'Unbounded', sans-serif;
-      font-size: clamp(1.6rem, 4vw, 2.6rem);
-      font-weight: 800; line-height: 1.22;
-      color: #0F172A; margin-bottom: 16px;
-      animation: fadeUp 0.5s 0.1s ease both;
-    }
-    .sm-hero-title span {
-      background: linear-gradient(135deg, #9B5DE5, #06D6E0);
-      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
-      background-clip: text;
+      font-size: 0.95rem; font-weight: 800; color: #fff; line-height: 1;
+      margin-bottom: 2px;
     }
+    .gx-hdr-sub { font-size: 0.62rem; color: rgba(255,255,255,0.38); letter-spacing: 0.08em; text-transform: uppercase; }
 
-    .sm-hero-sub {
-      font-size: 1rem; color: #5a6a8a;
-      line-height: 1.65; margin-bottom: 28px;
-      animation: fadeUp 0.5s 0.2s ease both;
-    }
-
-    .sm-hero-chips {
-      display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
-      animation: fadeUp 0.5s 0.3s ease both;
-    }
-    .sm-hero-chip {
-      display: flex; align-items: center; gap: 7px;
-      background: #fff;
-      border: 1.5px solid rgba(15,23,42,0.08);
-      color: #3D4F6B;
-      font-size: 0.78rem; font-weight: 600;
-      padding: 6px 14px; border-radius: 99px;
-      box-shadow: 0 1px 4px rgba(15,23,42,0.06);
-    }
-    .sm-hero-chip svg { width: 14px; height: 14px; }
-
-    .sm-scroll-hint {
-      position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
-      display: flex; flex-direction: column; align-items: center; gap: 6px;
-      color: #8898AA; font-size: 0.68rem; letter-spacing: 0.08em;
-      cursor: pointer; transition: color 0.2s;
-      animation: fadeUp 0.5s 0.5s ease both;
-    }
-    .sm-scroll-hint:hover { color: #3D4F6B; }
-    .sm-scroll-line {
-      width: 1.5px; height: 32px;
-      background: linear-gradient(to bottom, rgba(155,93,229,0.5), transparent);
-      animation: scrollPulse 1.8s ease-in-out infinite;
-    }
-    @keyframes scrollPulse {
-      0%,100% { opacity: 0.5; transform: scaleY(1); }
-      50%      { opacity: 1;   transform: scaleY(0.7); }
-    }
-
-    @keyframes fadeUp {
-      from { opacity: 0; transform: translateY(14px); }
-      to   { opacity: 1; transform: translateY(0); }
-    }
-
-    /* ── Filter bar ── */
-    .sm-filter-bar {
-      position: sticky; top: 0; z-index: 80;
-      background: rgba(238,242,255,0.92);
-      backdrop-filter: blur(16px);
-      border-bottom: 1px solid var(--border);
-      padding: 10px 40px;
-    }
-    .sm-filter-inner {
+    /* Beginner path hint */
+    .gx-hint {
+      position: absolute; top: 18px; left: 50%; transform: translateX(-50%); z-index: 10;
+      background: rgba(255,255,255,0.05); backdrop-filter: blur(14px);
+      border: 1px solid rgba(255,255,255,0.1); border-radius: 99px;
+      padding: 7px 18px;
       display: flex; align-items: center; gap: 8px;
-      max-width: 1200px; margin: 0 auto;
-      overflow-x: auto; scrollbar-width: none;
+      font-size: 0.69rem; color: rgba(255,255,255,0.5); white-space: nowrap;
+      pointer-events: none;
     }
-    .sm-filter-inner::-webkit-scrollbar { display: none; }
+    .gx-hint strong { color: rgba(255,255,255,0.82); font-weight: 700; }
+    .gx-hint-sep { color: rgba(255,255,255,0.22); margin: 0 2px; }
 
-    .sm-filter-label {
-      font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
-      letter-spacing: 0.1em; color: #8898AA;
-      white-space: nowrap; margin-right: 4px; flex-shrink: 0;
+    /* ── Category filters (bottom center) ── */
+    .gx-filters {
+      position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 10;
+      display: flex; align-items: center; gap: 5px;
+      background: rgba(255,255,255,0.05);
+      backdrop-filter: blur(16px);
+      border: 1px solid rgba(255,255,255,0.1);
+      border-radius: 99px; padding: 5px 8px;
     }
-
-    .sm-filter {
-      display: flex; align-items: center; gap: 7px;
-      background: #fff;
-      border: 1.5px solid rgba(15,23,42,0.09);
-      color: #3D4F6B;
-      font-family: 'Manrope', sans-serif;
-      font-size: 0.8rem; font-weight: 600;
-      padding: 6px 16px; border-radius: 99px;
-      cursor: pointer; white-space: nowrap;
-      transition: all 0.18s; flex-shrink: 0;
-      box-shadow: 0 1px 3px rgba(15,23,42,0.05);
-    }
-    .sm-filter:hover { border-color: rgba(155,93,229,0.35); color: #0F172A; }
-    .sm-filter.active { background: #9B5DE5; border-color: #9B5DE5; color: #fff; box-shadow: 0 2px 10px rgba(155,93,229,0.3); }
-    .sm-filter[data-cat="study"].active    { background: #9B5DE5; border-color: #9B5DE5; box-shadow: 0 2px 10px rgba(155,93,229,0.3); }
-    .sm-filter[data-cat="practice"].active { background: #0891b2; border-color: #0891b2; box-shadow: 0 2px 10px rgba(6,214,224,0.25); }
-    .sm-filter[data-cat="games"].active    { background: #db2777; border-color: #db2777; box-shadow: 0 2px 10px rgba(241,91,181,0.25); }
-    .sm-filter[data-cat="personal"].active { background: #d97706; border-color: #d97706; box-shadow: 0 2px 10px rgba(255,179,71,0.25); }
-
-    .sm-filter-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
-
-    /* ── Main content ── */
-    .sm-main { max-width: 1200px; margin: 0 auto; padding: 44px 40px 80px; }
-
-    /* ── Category section ── */
-    .sm-category { margin-bottom: 52px; }
-    .sm-category.hidden { display: none; }
-
-    .sm-cat-header {
-      display: flex; align-items: center; gap: 12px;
-      margin-bottom: 20px;
-    }
-    .sm-cat-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
-    .sm-cat-title {
-      font-family: 'Unbounded', sans-serif;
-      font-size: 0.82rem; font-weight: 800;
-      color: #0F172A;
-      text-transform: uppercase; letter-spacing: 0.06em;
-    }
-    .sm-cat-count {
-      font-size: 0.68rem; font-weight: 700; color: #8898AA;
-      background: rgba(15,23,42,0.05);
-      border: 1px solid rgba(15,23,42,0.08);
-      padding: 2px 10px; border-radius: 99px;
-    }
-
-    /* ── Cards grid ── */
-    .sm-grid {
-      display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
-      gap: 14px;
-    }
-
-    /* ── Card ── */
-    .sm-card {
-      position: relative;
-      display: flex; flex-direction: column;
-      background: #fff;
-      border: 1.5px solid rgba(15,23,42,0.07);
-      border-radius: 20px;
-      padding: 22px 20px 18px;
-      text-decoration: none; color: inherit;
-      transition: transform 0.22s, border-color 0.22s, box-shadow 0.22s;
-      overflow: hidden;
-      box-shadow: 0 2px 8px rgba(15,23,42,0.04);
-      opacity: 0; transform: translateY(16px);
-    }
-    .sm-card.visible { animation: cardIn 0.4s ease forwards; }
-    @keyframes cardIn { to { opacity: 1; transform: translateY(0); } }
-
-    .sm-card:hover {
-      transform: translateY(-3px);
-      border-color: rgba(var(--card-rgb), 0.35);
-      box-shadow: 0 8px 28px rgba(var(--card-rgb), 0.12), 0 2px 8px rgba(15,23,42,0.06);
-    }
-
-    .sm-card[data-cat="study"]    { --card-rgb: 155,93,229; }
-    .sm-card[data-cat="practice"] { --card-rgb: 6,145,178; }
-    .sm-card[data-cat="games"]    { --card-rgb: 219,39,119; }
-    .sm-card[data-cat="personal"] { --card-rgb: 217,119,6; }
-
-    .sm-card-start {
-      position: absolute; top: 14px; right: 14px;
-      display: inline-flex; align-items: center; gap: 5px;
-      background: rgba(5,150,105,0.1);
-      border: 1px solid rgba(5,150,105,0.3);
-      color: #059669; font-size: 0.62rem; font-weight: 700;
-      letter-spacing: 0.06em; text-transform: uppercase;
-      padding: 3px 9px; border-radius: 99px;
-      animation: startPulse 2s ease-in-out infinite;
-    }
-    .sm-card-start::before {
-      content: ''; width: 5px; height: 5px; border-radius: 50%;
-      background: #059669;
-    }
-    @keyframes startPulse {
-      0%,100% { opacity: 1; }
-      50%      { opacity: 0.6; }
-    }
-
-    .sm-card-step {
-      position: absolute; top: 14px; right: 14px;
-      width: 24px; height: 24px; border-radius: 50%;
-      background: rgba(var(--card-rgb), 0.1);
-      border: 1.5px solid rgba(var(--card-rgb), 0.3);
-      color: rgb(var(--card-rgb));
-      font-family: 'Unbounded', sans-serif;
-      font-size: 0.65rem; font-weight: 800;
-      display: flex; align-items: center; justify-content: center;
-    }
-
-    .sm-card-icon {
-      width: 48px; height: 48px; border-radius: 13px;
-      background: rgba(var(--card-rgb), 0.1);
-      border: 1px solid rgba(var(--card-rgb), 0.18);
-      display: flex; align-items: center; justify-content: center;
-      margin-bottom: 14px; flex-shrink: 0;
-      transition: transform 0.22s, box-shadow 0.22s;
-    }
-    .sm-card:hover .sm-card-icon {
-      transform: scale(1.07);
-      box-shadow: 0 0 16px rgba(var(--card-rgb), 0.2);
-    }
-    .sm-card-icon svg { width: 22px; height: 22px; color: rgb(var(--card-rgb)); stroke: rgb(var(--card-rgb)); }
-
-    .sm-card-title {
-      font-family: 'Unbounded', sans-serif;
-      font-size: 0.84rem; font-weight: 800;
-      color: #0F172A; margin-bottom: 7px;
-    }
-    .sm-card-desc {
-      font-size: 0.79rem; color: #5a6a8a;
-      line-height: 1.6; flex: 1;
-    }
-
-    .sm-card-footer {
-      display: flex; align-items: center; justify-content: space-between;
-      margin-top: 16px; padding-top: 12px;
-      border-top: 1px solid rgba(15,23,42,0.06);
-    }
-    .sm-card-tag {
-      font-size: 0.62rem; font-weight: 700;
-      letter-spacing: 0.06em; text-transform: uppercase;
-      color: rgb(var(--card-rgb));
-    }
-    .sm-card-arrow svg {
-      width: 15px; height: 15px;
-      color: #8898AA;
-      transition: transform 0.18s, color 0.18s;
-    }
-    .sm-card:hover .sm-card-arrow svg {
-      transform: translateX(4px);
-      color: rgb(var(--card-rgb));
-    }
-
-    /* ── Start path banner ── */
-    .sm-start-path { max-width: 1200px; margin: 0 auto 40px; padding: 0 40px; }
-    .sm-path-inner {
-      background: linear-gradient(135deg, rgba(155,93,229,0.06), rgba(6,214,224,0.04));
-      border: 1.5px solid rgba(155,93,229,0.18);
-      border-radius: 18px;
-      padding: 20px 24px;
-      display: flex; align-items: center; gap: 18px;
-      box-shadow: 0 2px 12px rgba(155,93,229,0.07);
-    }
-    .sm-path-icon {
-      width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
-      background: rgba(155,93,229,0.1);
-      display: flex; align-items: center; justify-content: center;
-    }
-    .sm-path-icon svg { width: 20px; height: 20px; color: #9B5DE5; stroke: #9B5DE5; }
-    .sm-path-body { flex: 1; }
-    .sm-path-title {
-      font-family: 'Unbounded', sans-serif;
-      font-size: 0.8rem; font-weight: 800; color: #0F172A; margin-bottom: 3px;
-    }
-    .sm-path-sub { font-size: 0.76rem; color: #5a6a8a; }
-    .sm-path-steps { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
-    .sm-path-step {
+    .gx-fil {
       display: flex; align-items: center; gap: 6px;
-      font-size: 0.75rem; font-weight: 600; color: #3D4F6B;
-      text-decoration: none; transition: color 0.18s;
+      font-family: 'Manrope', sans-serif; font-size: 0.71rem; font-weight: 700;
+      color: rgba(255,255,255,0.45);
+      background: none; border: none; cursor: pointer;
+      padding: 5px 13px; border-radius: 99px;
+      transition: all 0.18s; white-space: nowrap;
     }
-    .sm-path-step:hover { color: #9B5DE5; }
-    .sm-path-step-num {
-      width: 22px; height: 22px; border-radius: 50%;
-      background: rgba(155,93,229,0.12); border: 1.5px solid rgba(155,93,229,0.3);
-      color: #9B5DE5; font-family: 'Unbounded', sans-serif;
-      font-size: 0.6rem; font-weight: 800;
+    .gx-fil:hover { color: rgba(255,255,255,0.75); background: rgba(255,255,255,0.08); }
+    .gx-fil.active { color: #fff; background: rgba(255,255,255,0.12); }
+    .gx-fil-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
+
+    /* ── Module count (bottom right) ── */
+    .gx-count {
+      position: absolute; bottom: 26px; right: 28px; z-index: 10;
+      font-size: 0.61rem; color: rgba(255,255,255,0.2);
+      letter-spacing: 0.07em; text-transform: uppercase;
+    }
+
+    /* ── Mobile: simple grid fallback ── */
+    .gx-mobile { display: none; padding: 24px 16px 60px; }
+    .gx-mob-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 24px; }
+    .gx-mob-card {
+      display: flex; align-items: center; gap: 12px;
+      background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
+      border-radius: 16px; padding: 14px 14px;
+      text-decoration: none; transition: background 0.18s;
+    }
+    .gx-mob-card:hover { background: rgba(255,255,255,0.1); }
+    .gx-mob-icon {
+      width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
+      background: rgba(var(--nc), 0.15); border: 1px solid rgba(var(--nc), 0.3);
       display: flex; align-items: center; justify-content: center;
     }
-    .sm-path-sep { color: #8898AA; font-size: 0.7rem; }
-
-    /* ── Footer ── */
-    .sm-footer {
-      text-align: center; padding: 0 40px 60px;
-      font-size: 0.82rem; color: #8898AA;
+    .gx-mob-icon svg { width: 18px; height: 18px; color: rgb(var(--nc)); stroke: rgb(var(--nc)); }
+    .gx-mob-name { font-size: 0.78rem; font-weight: 700; color: #fff; }
+    .gx-mob-cat  { font-size: 0.62rem; color: rgba(255,255,255,0.4); margin-top: 1px; }
+    .gx-mob-sec-title {
+      font-family: 'Unbounded', sans-serif;
+      font-size: 0.68rem; font-weight: 800; color: rgba(255,255,255,0.4);
+      text-transform: uppercase; letter-spacing: 0.08em;
+      margin: 16px 0 8px; display: flex; align-items: center; gap: 8px;
     }
-    .sm-footer a { color: #9B5DE5; text-decoration: none; }
-    .sm-footer a:hover { text-decoration: underline; }
+    .gx-mob-dot { width: 7px; height: 7px; border-radius: 50%; }
 
-    /* ── Mobile ── */
     @media (max-width: 768px) {
-      .sm-hero { padding: 56px 20px 44px; min-height: 40vh; }
-      .sm-filter-bar { padding: 10px 16px; }
-      .sm-main { padding: 28px 16px 56px; }
-      .sm-grid { grid-template-columns: 1fr; }
-      .sm-start-path { padding: 0 16px; }
-      .sm-path-inner { flex-direction: column; gap: 14px; }
-      .sm-path-steps { flex-wrap: wrap; }
-      .sm-footer { padding: 0 16px 40px; }
-    }
-    @media (max-width: 480px) {
-      .sm-hero-title { font-size: 1.45rem; }
-      .sm-hero-chips { gap: 6px; }
+      .gx-canvas-ui { display: none !important; }
+      #gx-canvas    { display: none !important; }
+      #gx-nodes     { display: none !important; }
+      .gx-mobile    { display: block !important; }
+      .sb-content   { overflow-y: auto !important; }
     }
   </style>
 </head>
@@ -358,305 +222,71 @@
   <aside class="sidebar" id="app-sidebar"></aside>
   <div class="notif-drop" id="notif-drop"></div>
   <div class="sb-content">
+    <div class="gx-wrap" id="gx-wrap">
 
-    <!-- HERO -->
-    <section class="sm-hero" id="sm-hero">
-      <div class="sm-blob sm-blob-1"></div>
-      <div class="sm-blob sm-blob-2"></div>
-      <div class="sm-blob sm-blob-3"></div>
+      <!-- Canvas background -->
+      <canvas id="gx-canvas"></canvas>
 
-      <div class="sm-hero-content">
-        <div class="sm-hero-badge">
-          <i data-lucide="map" style="width:13px;height:13px"></i>
-          Путеводитель
+      <!-- Nodes -->
+      <div id="gx-nodes"></div>
+
+      <!-- Tooltip -->
+      <div class="gx-tt" id="gx-tt">
+        <div class="gx-tt-badge" id="tt-badge"></div>
+        <div class="gx-tt-title" id="tt-title"></div>
+        <div class="gx-tt-desc"  id="tt-desc"></div>
+        <a class="gx-tt-btn" id="tt-btn" href="#">
+          Открыть
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
+        </a>
+      </div>
+
+      <!-- Header (canvas UI elements) -->
+      <div class="gx-canvas-ui">
+        <div class="gx-hdr">
+          <div>
+            <div class="gx-hdr-logo">LearnSpace</div>
+            <div class="gx-hdr-sub">Карта модулей</div>
+          </div>
         </div>
-        <h1 class="sm-hero-title">
-          Добро пожаловать в<br><span>LearnSpace</span>
-        </h1>
-        <p class="sm-hero-sub">
-          Твоя платформа для учёбы, практики и открытий.<br>
-          Выбери модуль — и начни исследовать.
-        </p>
-        <div class="sm-hero-chips">
-          <span class="sm-hero-chip"><i data-lucide="layout-grid"></i> 15 модулей</span>
-          <span class="sm-hero-chip"><i data-lucide="atom"></i> 30+ симуляций</span>
-          <span class="sm-hero-chip"><i data-lucide="zap"></i> XP и уровни</span>
-          <span class="sm-hero-chip"><i data-lucide="users"></i> Классы</span>
+
+        <!-- Beginner hint -->
+        <div class="gx-hint">
+          <strong>Новичок?</strong>
+          <span class="gx-hint-sep">—</span>
+          Начни с <strong>Дашборда</strong>
+          <span class="gx-hint-sep">→</span>
+          <strong>Теории</strong>
+          <span class="gx-hint-sep">→</span>
+          <strong>Лаборатории</strong>
         </div>
+
+        <!-- Category filters -->
+        <div class="gx-filters">
+          <button class="gx-fil active" data-cat="all">Все</button>
+          <button class="gx-fil" data-cat="study">
+            <span class="gx-fil-dot" style="background:#9B5DE5"></span>Учёба
+          </button>
+          <button class="gx-fil" data-cat="practice">
+            <span class="gx-fil-dot" style="background:#06D6E0"></span>Практика
+          </button>
+          <button class="gx-fil" data-cat="games">
+            <span class="gx-fil-dot" style="background:#F15BB5"></span>Игры
+          </button>
+          <button class="gx-fil" data-cat="personal">
+            <span class="gx-fil-dot" style="background:#FFB347"></span>Личное
+          </button>
+        </div>
+
+        <div class="gx-count" id="gx-count"></div>
       </div>
 
-      <div class="sm-scroll-hint" onclick="document.getElementById('sm-filter-bar').scrollIntoView({behavior:'smooth'})">
-        <div class="sm-scroll-line"></div>
-        <span>Прокрути вниз</span>
-      </div>
-    </section>
+      <!-- Mobile fallback (hidden on desktop) -->
+      <div class="gx-mobile" id="gx-mobile"></div>
 
-    <!-- FILTER BAR -->
-    <div class="sm-filter-bar" id="sm-filter-bar">
-      <div class="sm-filter-inner">
-        <span class="sm-filter-label">Разделы:</span>
-        <button class="sm-filter active" data-cat="all">Все</button>
-        <button class="sm-filter" data-cat="study">
-          <span class="sm-filter-dot" style="background:#9B5DE5"></span>Учёба
-        </button>
-        <button class="sm-filter" data-cat="practice">
-          <span class="sm-filter-dot" style="background:#06D6E0"></span>Практика
-        </button>
-        <button class="sm-filter" data-cat="games">
-          <span class="sm-filter-dot" style="background:#F15BB5"></span>Игры
-        </button>
-        <button class="sm-filter" data-cat="personal">
-          <span class="sm-filter-dot" style="background:#FFB347"></span>Личное
-        </button>
-      </div>
     </div>
-
-    <!-- START PATH BANNER -->
-    <div class="sm-start-path" id="sm-start-path">
-      <div class="sm-path-inner">
-        <div class="sm-path-icon"><i data-lucide="rocket"></i></div>
-        <div class="sm-path-body">
-          <div class="sm-path-title">Маршрут новичка</div>
-          <div class="sm-path-sub">Рекомендуем начать с этих трёх шагов</div>
-        </div>
-        <div class="sm-path-steps">
-          <a href="/dashboard" class="sm-path-step">
-            <span class="sm-path-step-num">1</span> Дашборд
-          </a>
-          <span class="sm-path-sep">→</span>
-          <a href="/theory" class="sm-path-step">
-            <span class="sm-path-step-num">2</span> Теория
-          </a>
-          <span class="sm-path-sep">→</span>
-          <a href="/homework" class="sm-path-step">
-            <span class="sm-path-step-num">3</span> Задания
-          </a>
-        </div>
-      </div>
-    </div>
-
-    <!-- MODULES -->
-    <div class="sm-main">
-
-      <!-- УЧЁБА -->
-      <section class="sm-category" data-cat="study" id="cat-study">
-        <div class="sm-cat-header">
-          <span class="sm-cat-dot" style="background:#9B5DE5"></span>
-          <h2 class="sm-cat-title">Учёба</h2>
-          <span class="sm-cat-count">6 модулей</span>
-        </div>
-        <div class="sm-grid">
-
-          <a href="/dashboard" class="sm-card" data-cat="study">
-            <div class="sm-card-start">Начни здесь</div>
-            <div class="sm-card-icon"><i data-lucide="home"></i></div>
-            <div class="sm-card-title">Дашборд</div>
-            <p class="sm-card-desc">Твой центр управления: текущие задания, личный прогресс, XP, уровни и стрики</p>
-            <div class="sm-card-footer">
-              <span class="sm-card-tag">Главная</span>
-              <span class="sm-card-arrow"><i data-lucide="arrow-right"></i></span>
-            </div>
-          </a>
-
-          <a href="/theory" class="sm-card" data-cat="study">
-            <div class="sm-card-step">2</div>
-            <div class="sm-card-icon"><i data-lucide="brain"></i></div>
-            <div class="sm-card-title">Теория</div>
-            <p class="sm-card-desc">Уроки с текстом, формулами, медиа и мини-тестами. Читай, изучай, проверяй себя</p>
-            <div class="sm-card-footer">
-              <span class="sm-card-tag">Уроки</span>
-              <span class="sm-card-arrow"><i data-lucide="arrow-right"></i></span>
-            </div>
-          </a>
-
-          <a href="/homework" class="sm-card" data-cat="study">
-            <div class="sm-card-step">3</div>
-            <div class="sm-card-icon"><i data-lucide="clipboard-check"></i></div>
-            <div class="sm-card-title">Задания</div>
-            <p class="sm-card-desc">Домашние работы и тесты с дедлайнами. Следи за сроками и сдавай вовремя</p>
-            <div class="sm-card-footer">
-              <span class="sm-card-tag">Домашка</span>
-              <span class="sm-card-arrow"><i data-lucide="arrow-right"></i></span>
-            </div>
-          </a>
-
-          <a href="/library" class="sm-card" data-cat="study">
-            <div class="sm-card-icon"><i data-lucide="book-open"></i></div>
-            <div class="sm-card-title">Библиотека</div>
-            <p class="sm-card-desc">Файлы и материалы от учителя: конспекты, презентации, документы по предметам</p>
-            <div class="sm-card-footer">
-              <span class="sm-card-tag">Файлы</span>
-              <span class="sm-card-arrow"><i data-lucide="arrow-right"></i></span>
-            </div>
-          </a>
-
-          <a href="/flashcards" class="sm-card" data-cat="study">
-            <div class="sm-card-icon"><i data-lucide="copy"></i></div>
-            <div class="sm-card-title">Карточки</div>
-            <p class="sm-card-desc">Умные флэшкарты с интервальным повторением. Запоминай термины и факты эффективно</p>
-            <div class="sm-card-footer">
-              <span class="sm-card-tag">Повторение</span>
-              <span class="sm-card-arrow"><i data-lucide="arrow-right"></i></span>
-            </div>
-          </a>
-
-          <a href="/knowledge-map" class="sm-card" data-cat="study">
-            <div class="sm-card-icon"><i data-lucide="share-2"></i></div>
-            <div class="sm-card-title">Карта знаний</div>
-            <p class="sm-card-desc">Интерактивный граф связей между темами. Увидь картину целиком и найди пробелы</p>
-            <div class="sm-card-footer">
-              <span class="sm-card-tag">Граф</span>
-              <span class="sm-card-arrow"><i data-lucide="arrow-right"></i></span>
-            </div>
-          </a>
-
-        </div>
-      </section>
-
-      <!-- ПРАКТИКА -->
-      <section class="sm-category" data-cat="practice" id="cat-practice">
-        <div class="sm-cat-header">
-          <span class="sm-cat-dot" style="background:#06D6E0"></span>
-          <h2 class="sm-cat-title">Практика</h2>
-          <span class="sm-cat-count">4 модуля</span>
-        </div>
-        <div class="sm-grid">
-
-          <a href="/lab" class="sm-card" data-cat="practice">
-            <div class="sm-card-icon"><i data-lucide="atom"></i></div>
-            <div class="sm-card-title">Лаборатория</div>
-            <p class="sm-card-desc">30+ интерактивных симуляций по физике, химии и биологии. Ставь опыты прямо в браузере</p>
-            <div class="sm-card-footer">
-              <span class="sm-card-tag">Симуляции</span>
-              <span class="sm-card-arrow"><i data-lucide="arrow-right"></i></span>
-            </div>
-          </a>
-
-          <a href="/biochem" class="sm-card" data-cat="practice">
-            <div class="sm-card-icon"><i data-lucide="flask-conical"></i></div>
-            <div class="sm-card-title">Биохимия</div>
-            <p class="sm-card-desc">Молекулы, реакции, метаболические пути и задачи-челленджи. Интерактивная химия жизни</p>
-            <div class="sm-card-footer">
-              <span class="sm-card-tag">Химия</span>
-              <span class="sm-card-arrow"><i data-lucide="arrow-right"></i></span>
-            </div>
-          </a>
-
-          <a href="/classroom" class="sm-card" data-cat="practice">
-            <div class="sm-card-icon"><i data-lucide="presentation"></i></div>
-            <div class="sm-card-title">Онлайн-урок</div>
-            <p class="sm-card-desc">Живой урок с учителем: интерактивная доска, чат, видеосвязь и совместная работа</p>
-            <div class="sm-card-footer">
-              <span class="sm-card-tag">Live</span>
-              <span class="sm-card-arrow"><i data-lucide="arrow-right"></i></span>
-            </div>
-          </a>
-
-          <a href="/board" class="sm-card" data-cat="practice">
-            <div class="sm-card-icon"><i data-lucide="layout-dashboard"></i></div>
-            <div class="sm-card-title">Доска</div>
-            <p class="sm-card-desc">Свободная интерактивная доска для рисования, заметок, схем и формул в любое время</p>
-            <div class="sm-card-footer">
-              <span class="sm-card-tag">Рисование</span>
-              <span class="sm-card-arrow"><i data-lucide="arrow-right"></i></span>
-            </div>
-          </a>
-
-        </div>
-      </section>
-
-      <!-- ИГРЫ -->
-      <section class="sm-category" data-cat="games" id="cat-games">
-        <div class="sm-cat-header">
-          <span class="sm-cat-dot" style="background:#F15BB5"></span>
-          <h2 class="sm-cat-title">Игры</h2>
-          <span class="sm-cat-count">4 модуля</span>
-        </div>
-        <div class="sm-grid">
-
-          <a href="/hangman" class="sm-card" data-cat="games">
-            <div class="sm-card-icon"><i data-lucide="gamepad-2"></i></div>
-            <div class="sm-card-title">Виселица</div>
-            <p class="sm-card-desc">Угадывай учебные термины и понятия. Весёлый способ проверить знания по предмету</p>
-            <div class="sm-card-footer">
-              <span class="sm-card-tag">Слова</span>
-              <span class="sm-card-arrow"><i data-lucide="arrow-right"></i></span>
-            </div>
-          </a>
-
-          <a href="/crossword" class="sm-card" data-cat="games">
-            <div class="sm-card-icon"><i data-lucide="grid-3x3"></i></div>
-            <div class="sm-card-title">Кроссворд</div>
-            <p class="sm-card-desc">Решай кроссворды по темам школьной программы — биология, химия, физика и другие</p>
-            <div class="sm-card-footer">
-              <span class="sm-card-tag">Кроссворд</span>
-              <span class="sm-card-arrow"><i data-lucide="arrow-right"></i></span>
-            </div>
-          </a>
-
-          <a href="/red-book" class="sm-card" data-cat="games">
-            <div class="sm-card-icon"><i data-lucide="leaf"></i></div>
-            <div class="sm-card-title">Красная книга</div>
-            <p class="sm-card-desc">Каталог редких видов, биомы, пищевые сети, экосистемы и эко-игры. Изучай природу</p>
-            <div class="sm-card-footer">
-              <span class="sm-card-tag">Экология</span>
-              <span class="sm-card-arrow"><i data-lucide="arrow-right"></i></span>
-            </div>
-          </a>
-
-          <a href="/collection" class="sm-card" data-cat="games">
-            <div class="sm-card-icon"><i data-lucide="layers"></i></div>
-            <div class="sm-card-title">Коллекция</div>
-            <p class="sm-card-desc">Собирай предметы, открывай новые виды и пополняй свою личную коллекцию знаний</p>
-            <div class="sm-card-footer">
-              <span class="sm-card-tag">Сбор</span>
-              <span class="sm-card-arrow"><i data-lucide="arrow-right"></i></span>
-            </div>
-          </a>
-
-        </div>
-      </section>
-
-      <!-- ЛИЧНОЕ -->
-      <section class="sm-category" data-cat="personal" id="cat-personal">
-        <div class="sm-cat-header">
-          <span class="sm-cat-dot" style="background:#FFB347"></span>
-          <h2 class="sm-cat-title">Личное</h2>
-          <span class="sm-cat-count">2 модуля</span>
-        </div>
-        <div class="sm-grid">
-
-          <a href="/pet" class="sm-card" data-cat="personal">
-            <div class="sm-card-icon"><i data-lucide="heart"></i></div>
-            <div class="sm-card-title">Питомец</div>
-            <p class="sm-card-desc">Виртуальный питомец, который растёт вместе с тобой. Учись — он становится сильнее</p>
-            <div class="sm-card-footer">
-              <span class="sm-card-tag">Питомец</span>
-              <span class="sm-card-arrow"><i data-lucide="arrow-right"></i></span>
-            </div>
-          </a>
-
-          <a href="/profile" class="sm-card" data-cat="personal">
-            <div class="sm-card-icon"><i data-lucide="user"></i></div>
-            <div class="sm-card-title">Профиль</div>
-            <p class="sm-card-desc">Аватар, достижения, история прогресса, рамки, настройки аккаунта и персонализация</p>
-            <div class="sm-card-footer">
-              <span class="sm-card-tag">Аккаунт</span>
-              <span class="sm-card-arrow"><i data-lucide="arrow-right"></i></span>
-            </div>
-          </a>
-
-        </div>
-      </section>
-
-    </div><!-- .sm-main -->
-
-    <div class="sm-footer">
-      Не знаешь, с чего начать? Перейди на <a href="/dashboard">Дашборд</a> — там уже ждут твои задания.
-    </div>
-
-  </div><!-- .sb-content -->
-</div><!-- .app-layout -->
+  </div>
+</div>
 
 <script src="/js/api.js"></script>
 <script src="/js/sidebar.js"></script>
@@ -664,49 +294,243 @@
 <script src="/js/search.js"></script>
 <script src="/js/mobile.js"></script>
 <script>
-  LS.initPage();
+LS.initPage();
 
-  lucide.createIcons();
+/* ══ Module data ══ */
+const MODULES = [
+  /* ── Учёба ── */
+  { id:'dashboard',   href:'/dashboard',     label:'Дашборд',       desc:'Центр управления: задания, XP, уровни, прогресс и стрики',          cat:'study',    icon:'home',             x:0.34, y:0.29 },
+  { id:'theory',      href:'/theory',        label:'Теория',         desc:'Уроки с текстом, формулами, медиа и встроенными мини-тестами',       cat:'study',    icon:'brain',            x:0.17, y:0.38 },
+  { id:'library',     href:'/library',       label:'Библиотека',     desc:'Файлы и материалы от учителя: конспекты, презентации, документы',   cat:'study',    icon:'book-open',        x:0.30, y:0.48 },
+  { id:'knowledge',   href:'/knowledge-map', label:'Карта знаний',   desc:'Интерактивный граф связей между темами. Увидь всю картину',          cat:'study',    icon:'share-2',          x:0.18, y:0.52 },
+  /* ── Практика ── */
+  { id:'lab',         href:'/lab',           label:'Лаборатория',    desc:'30+ интерактивных симуляций по физике, химии и биологии',            cat:'practice', icon:'atom',             x:0.64, y:0.25 },
+  { id:'biochem',     href:'/biochem',       label:'Биохимия',       desc:'Молекулы, реакции, метаболические пути и задачи-челленджи',          cat:'practice', icon:'flask-conical',    x:0.76, y:0.17 },
+  { id:'classroom',   href:'/classroom',     label:'Онлайн-урок',    desc:'Живой урок с учителем: интерактивная доска, чат и видеосвязь',       cat:'practice', icon:'presentation',     x:0.74, y:0.40 },
+  { id:'board',       href:'/board',         label:'Доска',          desc:'Свободная доска для рисования, заметок, схем и формул',             cat:'practice', icon:'layout-dashboard', x:0.58, y:0.38 },
+  /* ── Игры ── */
+  { id:'hangman',     href:'/hangman',       label:'Виселица',       desc:'Угадывай слова по теме урока — учись играя',                        cat:'games',    icon:'gamepad-2',        x:0.20, y:0.67 },
+  { id:'crossword',   href:'/crossword',     label:'Кроссворд',      desc:'Тематические кроссворды по предметам. Проверь словарный запас',      cat:'games',    icon:'grid-3x3',         x:0.35, y:0.74 },
+  { id:'pet',         href:'/pet',           label:'Питомец',        desc:'Виртуальный питомец растёт вместе с твоим прогрессом в учёбе',      cat:'games',    icon:'heart',            x:0.13, y:0.77 },
+  { id:'collection',  href:'/collection',    label:'Коллекция',      desc:'Собирай карточки и предметы за достижения и активность',            cat:'games',    icon:'layers',           x:0.46, y:0.78 },
+  { id:'redbook',     href:'/red-book',      label:'Красная книга',  desc:'Редкие виды животных и растений. Изучай биосферу Земли',            cat:'games',    icon:'leaf',             x:0.27, y:0.83 },
+  /* ── Личное ── */
+  { id:'profile',     href:'/profile',       label:'Профиль',        desc:'Имя, аватар, статистика достижений, значки и история активности',  cat:'personal', icon:'user',             x:0.70, y:0.62 },
+  { id:'history',     href:'/lesson-history',label:'Архив уроков',   desc:'Записи прошедших онлайн-уроков. Доски и материалы урока',           cat:'personal', icon:'archive',          x:0.82, y:0.54 },
+];
 
-  /* ── Filter ── */
-  const filters = document.querySelectorAll('.sm-filter');
-  const cats    = document.querySelectorAll('.sm-category');
-  const banner  = document.getElementById('sm-start-path');
+const CONNECTIONS = [
+  ['dashboard','theory'],   ['dashboard','library'],  ['dashboard','hangman'],
+  ['theory','library'],     ['theory','knowledge'],   ['theory','lab'],
+  ['lab','biochem'],        ['lab','classroom'],      ['classroom','board'],
+  ['classroom','history'],  ['hangman','crossword'],  ['hangman','pet'],
+  ['pet','collection'],     ['collection','redbook'], ['profile','dashboard'],
+  ['profile','history'],    ['library','lab'],        ['board','crossword'],
+];
 
-  filters.forEach(btn => {
-    btn.addEventListener('click', () => {
-      filters.forEach(f => f.classList.remove('active'));
-      btn.classList.add('active');
-      const cat = btn.dataset.cat;
+const CAT_INFO = {
+  study:    { label:'Учёба',    rgb:[155,93,229] },
+  practice: { label:'Практика', rgb:[6,214,224]  },
+  games:    { label:'Игры',     rgb:[241,91,181] },
+  personal: { label:'Личное',   rgb:[255,179,71] },
+};
 
-      cats.forEach(sec => {
-        if (cat === 'all' || sec.dataset.cat === cat) {
-          sec.classList.remove('hidden');
-        } else {
-          sec.classList.add('hidden');
-        }
-      });
+/* ══ Build HTML nodes ══ */
+const nodesWrap = document.getElementById('gx-nodes');
+const nodeMap   = {};
 
-      // hide start path banner when filtering
-      banner.style.display = cat === 'all' ? '' : 'none';
-    });
+MODULES.forEach((m, i) => {
+  const [r,g,b] = CAT_INFO[m.cat].rgb;
+  const el = document.createElement('div');
+  el.className = 'gx-node' + (m.id === 'dashboard' ? ' gx-main' : '');
+  el.dataset.id  = m.id;
+  el.dataset.cat = m.cat;
+  el.style.cssText = `left:${m.x*100}%;top:${m.y*100}%;--nc:${r},${g},${b};animation-delay:${i*0.045}s`;
+  el.innerHTML = `
+    <div class="gx-orb"><i data-lucide="${m.icon}"></i></div>
+    <span class="gx-label">${m.label}</span>`;
+  el.addEventListener('mouseenter', () => showTip(m, el));
+  el.addEventListener('mouseleave', queueHideTip);
+  el.addEventListener('click', () => location.href = m.href);
+  nodesWrap.appendChild(el);
+  nodeMap[m.id] = el;
+});
+
+if (window.lucide) lucide.createIcons();
+document.getElementById('gx-count').textContent = MODULES.length + ' модулей';
+
+/* ══ Tooltip ══ */
+const tt      = document.getElementById('gx-tt');
+const ttBadge = document.getElementById('tt-badge');
+const ttTitle = document.getElementById('tt-title');
+const ttDesc  = document.getElementById('tt-desc');
+const ttBtn   = document.getElementById('tt-btn');
+let hideTimer = null;
+let hoveredId = null;
+
+function showTip(m, nodeEl) {
+  clearTimeout(hideTimer);
+  hoveredId = m.id;
+  const [r,g,b] = CAT_INFO[m.cat].rgb;
+  ttBadge.textContent = CAT_INFO[m.cat].label;
+  ttBadge.style.cssText = `background:rgba(${r},${g},${b},0.14);color:rgb(${r},${g},${b});border:1px solid rgba(${r},${g},${b},0.3)`;
+  ttTitle.textContent = m.label;
+  ttDesc.textContent  = m.desc;
+  ttBtn.href = m.href;
+  ttBtn.style.cssText = `background:rgba(${r},${g},${b},0.14);color:rgb(${r},${g},${b});border:1px solid rgba(${r},${g},${b},0.3)`;
+
+  // Position near node
+  const rect = nodeEl.getBoundingClientRect();
+  const cx = rect.left + rect.width / 2;
+  const cy = rect.top;
+  const W = window.innerWidth, H = window.innerHeight;
+  let left = cx + 24, top = cy - 16;
+  if (left + 250 > W - 8) left = cx - 258;
+  if (top + 200 > H - 8) top = H - 208;
+  if (top < 8) top = 8;
+  tt.style.left = left + 'px';
+  tt.style.top  = top  + 'px';
+  tt.classList.add('vis');
+
+  // Highlight connected nodes
+  highlightConnected(m.id);
+}
+
+function queueHideTip() {
+  hideTimer = setTimeout(() => { tt.classList.remove('vis'); hoveredId = null; highlightConnected(null); }, 180);
+}
+
+tt.addEventListener('mouseenter', () => clearTimeout(hideTimer));
+tt.addEventListener('mouseleave', queueHideTip);
+
+function highlightConnected(id) {
+  Object.values(nodeMap).forEach(el => {
+    el.classList.remove('gx-connected');
+    if (!id) return;
+    const nid = el.dataset.id;
+    const linked = CONNECTIONS.some(([a,b]) => (a===id && b===nid) || (b===id && a===nid));
+    if (linked) el.classList.add('gx-connected');
+  });
+}
+
+/* ══ Canvas ══ */
+const canvas = document.getElementById('gx-canvas');
+const ctx    = canvas.getContext('2d');
+const wrap   = document.getElementById('gx-wrap');
+
+// Stars
+const STARS = Array.from({length:220}, () => ({
+  x: Math.random(), y: Math.random(),
+  r: Math.random() * 1.2 + 0.25,
+  a: Math.random() * 0.55 + 0.2,
+  sp: Math.random() * 0.012 + 0.003,
+  ph: Math.random() * Math.PI * 2,
+}));
+
+// Nebula zones (x,y,r in 0-1 space)
+const NEBULAS = [
+  { x:0.22, y:0.40, r:0.26, c:[155,93,229], a:0.10 },
+  { x:0.68, y:0.30, r:0.23, c:[6,214,224],  a:0.08 },
+  { x:0.27, y:0.74, r:0.22, c:[241,91,181], a:0.09 },
+  { x:0.74, y:0.60, r:0.20, c:[255,179,71], a:0.07 },
+];
+
+let frame = 0;
+
+function resize() {
+  canvas.width  = wrap.clientWidth  || window.innerWidth;
+  canvas.height = wrap.clientHeight || window.innerHeight;
+}
+resize();
+window.addEventListener('resize', resize);
+
+function drawFrame() {
+  const W = canvas.width, H = canvas.height;
+  ctx.clearRect(0, 0, W, H);
+
+  // Deep space background
+  const bg = ctx.createRadialGradient(W*0.42, H*0.38, 0, W*0.5, H*0.5, W*0.82);
+  bg.addColorStop(0, '#1c0e40');
+  bg.addColorStop(0.45,'#110832');
+  bg.addColorStop(1, '#08051a');
+  ctx.fillStyle = bg;
+  ctx.fillRect(0, 0, W, H);
+
+  // Nebula clouds
+  const t = frame * 0.007;
+  NEBULAS.forEach((n, i) => {
+    const pulse = 1 + Math.sin(t + i * 1.7) * 0.08;
+    const g = ctx.createRadialGradient(n.x*W, n.y*H, 0, n.x*W, n.y*H, n.r * W * pulse);
+    g.addColorStop(0,   `rgba(${n.c},${n.a})`);
+    g.addColorStop(0.45,`rgba(${n.c},${n.a * 0.4})`);
+    g.addColorStop(1,   'rgba(0,0,0,0)');
+    ctx.fillStyle = g;
+    ctx.fillRect(0, 0, W, H);
   });
 
-  /* ── Staggered entrance via IntersectionObserver ── */
-  const observer = new IntersectionObserver((entries) => {
-    entries.forEach(entry => {
-      if (entry.isIntersecting) {
-        const card  = entry.target;
-        const cards = Array.from(card.closest('.sm-grid')?.children || []);
-        const idx   = cards.indexOf(card);
-        card.style.animationDelay = (idx * 55) + 'ms';
-        card.classList.add('visible');
-        observer.unobserve(card);
-      }
-    });
-  }, { threshold: 0.1 });
+  // Twinkling stars
+  STARS.forEach(s => {
+    const tw = Math.sin(frame * s.sp + s.ph) * 0.38 + 0.62;
+    ctx.globalAlpha = s.a * tw;
+    ctx.fillStyle = '#fff';
+    ctx.beginPath();
+    ctx.arc(s.x * W, s.y * H, s.r, 0, Math.PI*2);
+    ctx.fill();
+  });
+  ctx.globalAlpha = 1;
 
-  document.querySelectorAll('.sm-card').forEach(card => observer.observe(card));
+  // Connection lines
+  ctx.save();
+  ctx.setLineDash([3, 10]);
+  CONNECTIONS.forEach(([a, b]) => {
+    const ma = MODULES.find(m => m.id === a);
+    const mb = MODULES.find(m => m.id === b);
+    if (!ma || !mb) return;
+    const isHovered = hoveredId && (a === hoveredId || b === hoveredId);
+    ctx.strokeStyle = isHovered ? 'rgba(255,255,255,0.38)' : 'rgba(255,255,255,0.065)';
+    ctx.lineWidth   = isHovered ? 1.4 : 0.7;
+    ctx.beginPath();
+    ctx.moveTo(ma.x * W, ma.y * H);
+    ctx.lineTo(mb.x * W, mb.y * H);
+    ctx.stroke();
+  });
+  ctx.restore();
+
+  frame++;
+  requestAnimationFrame(drawFrame);
+}
+drawFrame();
+
+/* ══ Category filter ══ */
+document.querySelectorAll('.gx-fil').forEach(btn => {
+  btn.addEventListener('click', () => {
+    document.querySelectorAll('.gx-fil').forEach(b => b.classList.remove('active'));
+    btn.classList.add('active');
+    const cat = btn.dataset.cat;
+    Object.values(nodeMap).forEach(el => {
+      el.classList.toggle('gx-dim', cat !== 'all' && el.dataset.cat !== cat);
+    });
+  });
+});
+
+/* ══ Mobile fallback: card grid ══ */
+const mobEl = document.getElementById('gx-mobile');
+const byCat = {};
+MODULES.forEach(m => { (byCat[m.cat] = byCat[m.cat]||[]).push(m); });
+['study','practice','games','personal'].forEach(cat => {
+  const info = CAT_INFO[cat];
+  const [r,g,b] = info.rgb;
+  let html = `<div class="gx-mob-sec-title"><span class="gx-mob-dot" style="background:rgb(${r},${g},${b})"></span>${info.label}</div><div class="gx-mob-grid">`;
+  (byCat[cat]||[]).forEach(m => {
+    html += `<a href="${m.href}" class="gx-mob-card" data-cat="${cat}" style="--nc:${r},${g},${b}">
+      <div class="gx-mob-icon"><i data-lucide="${m.icon}"></i></div>
+      <div><div class="gx-mob-name">${m.label}</div><div class="gx-mob-cat">${info.label}</div></div>
+    </a>`;
+  });
+  html += '</div>';
+  mobEl.insertAdjacentHTML('beforeend', html);
+});
+if (window.lucide) lucide.createIcons();
 </script>
 </body>
 </html>