Update index.html

index.html

@@ -6,104 +6,93 @@
 <title>Cubic — AGI, AI, and Cybersecurity Research</title>
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600;8..60,700&display=swap" rel="stylesheet">
 <style>
   :root{
-    --bg:#0b140f;
-    --panel:#101d16;
-    --panel-2:#132218;
-    --line:#1c2e21;
-    --line-bright:#2a4433;
-    --solder:#c9a227;
-    --copper:#a06a2e;
-    --silk:#eee9d8;
-    --text:#cfd6c8;
-    --muted:#788675;
+    --bg:#0a0a0b;
+    --panel:#131316;
+    --panel-2:#18181c;
+    --line:#232328;
+    --line-bright:#33333a;
+    --accent:#c9c8c2;
+    --accent-dim:#8a8a87;
+    --silk:#f2f1ec;
+    --text:#b9b9bd;
+    --muted:#6f6f76;
+    --ok:#8fae6e;
     --mx:50%;
-    --my:30%;
+    --my:26%;
   }
   [data-theme="light"]{
-    --bg:#eee9da;
-    --panel:#f8f4e8;
-    --panel-2:#efe8d5;
-    --line:#ddd2ac;
-    --line-bright:#c3b382;
-    --solder:#8a6415;
-    --copper:#7a4a1f;
-    --silk:#20241a;
-    --text:#33362a;
-    --muted:#6f664e;
+    --bg:#f1efe9;
+    --panel:#fbfaf6;
+    --panel-2:#eeece4;
+    --line:#dcd9cf;
+    --line-bright:#b8b4a4;
+    --accent:#3c3c3e;
+    --accent-dim:#7a7a76;
+    --silk:#17171a;
+    --text:#3c3c3e;
+    --muted:#7a7a76;
+    --ok:#5c7a3e;
   }
   *{box-sizing:border-box;}
   html{scroll-behavior:smooth;}
   body{
     margin:0;
-    font-family:'IBM Plex Sans',ui-sans-serif,system-ui;
+    font-family:'Source Serif 4',Georgia,serif;
     color:var(--text);
     background:var(--bg);
     transition:background 0.25s ease, color 0.25s ease;
+    overflow-x:hidden;
   }
-  ::selection{background:var(--solder);color:#12160c;}
+  ::selection{background:var(--accent);color:#1a0f08;}
   a{color:inherit;}
-  .circuit-bg{
+
+  /* ---------- starfield backdrop ---------- */
+  .star-stage{
     position:fixed;
     inset:0;
-    width:100%;
-    height:100%;
     z-index:0;
     pointer-events:none;
+    overflow:hidden;
+    background:radial-gradient(ellipse at 60% 0%, #0d0d10 0%, var(--bg) 55%);
   }
-  .circuit-bg path{
-    fill:none;
-    stroke:var(--line);
-    stroke-width:1.4;
-  }
-  .circuit-bg circle{
-    fill:var(--line-bright);
-  }
-  .pulse-layer{position:fixed;inset:0;z-index:0;pointer-events:none;}
-  .pulse{
+  [data-theme="light"] .star-stage{background:var(--bg);}
+  .starfield{
     position:absolute;
-    top:0;left:0;
-    width:4px;height:4px;
-    margin:-2px;
-    border-radius:50%;
-    background:var(--solder);
-    box-shadow:0 0 7px 1px var(--solder);
-    animation:travel linear infinite;
-    will-change:offset-distance;
+    inset:0;
+    opacity:0.55;
   }
-  @keyframes travel{ from{offset-distance:0%;} to{offset-distance:100%;} }
+  [data-theme="light"] .starfield{opacity:0;}
+
   .cursor-glow{
     position:fixed;
     inset:0;
     z-index:0;
     pointer-events:none;
-    background:radial-gradient(480px circle at var(--mx) var(--my), rgba(201,162,39,0.10), transparent 72%);
-  }
-  body.paused .pulse{animation-play-state:paused;}
-  @media (prefers-reduced-motion: reduce){
-    .pulse{animation:none;display:none;}
-    .cursor-glow{background:none;}
+    background:radial-gradient(420px circle at var(--mx) var(--my), rgba(242,161,83,0.07), transparent 72%);
   }
+
   .wrap{position:relative;z-index:1;max-width:960px;margin:0 auto;padding:0 24px 90px;}
   header{
     display:flex;
     align-items:center;
     justify-content:space-between;
     padding:20px 0;
-    border-bottom:1px solid var(--line-bright);
+    border-bottom:1px solid var(--line);
+    background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
     margin-bottom:56px;
   }
   .brand{display:flex;align-items:center;gap:9px;}
   .chip{width:22px;height:22px;flex-shrink:0;}
-  .chip rect{fill:none;stroke:var(--solder);stroke-width:1.4;}
-  .chip circle{fill:var(--solder);}
-  .chip line{stroke:var(--solder);stroke-width:1.2;}
+  .chip rect{fill:none;stroke:var(--accent);stroke-width:1.4;}
+  .chip circle{fill:var(--accent);}
+  .chip line{stroke:var(--accent);stroke-width:1.2;}
   .brand-name{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:16px;letter-spacing:0.01em;color:var(--silk);}
   nav{display:flex;align-items:center;gap:16px;}
-  nav a{text-decoration:none;color:var(--muted);font-size:13px;font-weight:500;border-bottom:1px solid transparent;}
-  nav a:hover{color:var(--silk);border-color:var(--solder);}
+  nav a{text-decoration:none;color:var(--muted);font-size:13px;font-weight:500;font-family:'IBM Plex Mono',monospace;border-bottom:1px solid transparent;}
+  nav a:hover{color:var(--silk);border-color:var(--accent);}
   .theme-row{display:flex;align-items:center;gap:6px;margin-left:6px;}
   .switch-label{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--muted);}
   #theme-toggle{
@@ -115,67 +104,72 @@
     cursor:pointer;
     padding:0;
   }
+  #theme-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
   #theme-toggle::after{
     content:"";
     position:absolute;
     top:1px;left:1px;
     width:13px;height:13px;
     border-radius:2px;
-    background:var(--solder);
+    background:var(--accent);
     transition:transform 0.16s ease;
   }
   [data-theme="light"] #theme-toggle::after{transform:translateX(15px);}
+
   .eyebrow{
     font-family:'IBM Plex Mono',monospace;
     font-size:11.5px;
-    color:var(--solder);
+    color:var(--accent);
     letter-spacing:0.09em;
     text-transform:uppercase;
     margin-bottom:16px;
   }
   h1{
-    font-family:'IBM Plex Mono',monospace;
-    font-size:34px;
-    line-height:1.25;
+    font-family:'Source Serif 4',Georgia,serif;
+    font-size:38px;
+    line-height:1.22;
     font-weight:600;
     color:var(--silk);
     margin:0 0 16px;
     max-width:620px;
-    letter-spacing:-0.01em;
+    letter-spacing:-0.005em;
   }
-  .tagline{color:var(--muted);font-size:15.5px;line-height:1.65;max-width:540px;margin:0 0 44px;}
+  .tagline{color:var(--muted);font-size:16px;line-height:1.65;max-width:540px;margin:0 0 44px;font-family:'Source Serif 4',serif;}
   .pin1{
     display:inline-block;
     width:5px;height:5px;
     border-radius:50%;
-    background:var(--solder);
+    background:var(--accent);
     margin-right:7px;
-    box-shadow:0 0 4px var(--solder);
+    box-shadow:0 0 4px var(--accent);
   }
   .metrics{
     display:grid;
     grid-template-columns:repeat(5,1fr);
-    border:1px solid var(--line-bright);
-    border-radius:5px;
+    border:1px solid var(--line);
+    border-radius:8px;
     overflow:hidden;
     margin-bottom:68px;
+    background:linear-gradient(180deg, var(--panel-2), var(--panel));
+    box-shadow:0 1px 0 rgba(255,255,255,0.03) inset, 0 12px 24px -16px rgba(0,0,0,0.5);
   }
   .metric{
-    background:var(--panel);
-    padding:18px 12px;
+    padding:19px 12px;
     text-align:center;
-    border-right:1px solid var(--line-bright);
+    border-right:1px solid var(--line);
   }
   .metric:last-child{border-right:none;}
   .metric b{
     display:block;
     font-family:'IBM Plex Mono',monospace;
-    font-size:21px;
+    font-size:22px;
     font-weight:600;
     color:var(--silk);
     margin-bottom:5px;
+    letter-spacing:-0.01em;
   }
-  .metric span{font-size:11px;color:var(--muted);letter-spacing:0.01em;}
+  .metric span{font-size:10.5px;color:var(--muted);letter-spacing:0.04em;text-transform:uppercase;font-family:'IBM Plex Mono',monospace;}
+
   section{margin-bottom:64px;}
   h2{
     font-family:'IBM Plex Mono',monospace;
@@ -189,50 +183,102 @@
     gap:10px;
   }
   h2::after{content:"";flex:1;height:1px;background:var(--line-bright);}
+
   .focus-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
   .card{
     position:relative;
-    background:var(--panel);
-    border:1px solid var(--line-bright);
-    border-radius:5px;
-    padding:17px;
-  }
-  .card::before,.card::after,.card .cr-tl,.card .cr-br{
-    content:"";
-    position:absolute;
-    width:7px;height:7px;
-    opacity:0.55;
+    background:linear-gradient(180deg, var(--panel-2), var(--panel));
+    border:1px solid var(--line);
+    border-radius:8px;
+    padding:18px;
+    box-shadow:0 1px 0 rgba(255,255,255,0.03) inset, 0 8px 20px -14px rgba(0,0,0,0.6);
+    transition:border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
   }
-  .card::before{
-    top:-1px;left:-1px;
-    border-top:1px solid var(--solder);
-    border-left:1px solid var(--solder);
+
+  .focus-card{
+    cursor:pointer;
+    text-align:left;
+    width:100%;
+    font:inherit;
+    color:inherit;
+    transition:border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
   }
-  .card::after{
-    bottom:-1px;right:-1px;
-    border-bottom:1px solid var(--solder);
-    border-right:1px solid var(--solder);
+  .focus-card:hover,.focus-card.active{
+    border-color:var(--line-bright);
+    transform:translateY(-1px);
+    box-shadow:0 1px 0 rgba(255,255,255,0.04) inset, 0 14px 28px -16px rgba(0,0,0,0.65);
   }
+  .focus-card.active{background:linear-gradient(180deg, var(--panel-2), var(--panel-2));}
   .focus-card b{font-family:'IBM Plex Mono',monospace;font-size:14px;color:var(--silk);display:block;margin-bottom:7px;}
-  .focus-card p{font-size:13px;color:var(--muted);margin:0;line-height:1.55;}
-  .search-row{margin-bottom:14px;}
+  .focus-card p{font-size:13.5px;color:var(--muted);margin:0;line-height:1.55;}
+  .focus-card em{
+    display:block;
+    margin-top:9px;
+    font-style:normal;
+    font-family:'IBM Plex Mono',monospace;
+    font-size:10.5px;
+    color:var(--accent);
+    letter-spacing:0.04em;
+    text-transform:uppercase;
+  }
+
+  .search-row{margin-bottom:14px;display:flex;gap:8px;align-items:center;}
   .search-row input{
-    width:100%;
+    flex:1;
     background:var(--panel);
-    border:1px solid var(--line-bright);
+    border:1px solid var(--line);
     color:var(--text);
-    border-radius:4px;
-    padding:9px 13px;
+    border-radius:6px;
+    padding:10px 14px;
     font-size:13.5px;
-    font-family:'IBM Plex Sans',sans-serif;
+    font-family:'Source Serif 4',serif;
     outline:none;
+    box-shadow:0 1px 2px rgba(0,0,0,0.3) inset;
+    transition:border-color 0.15s ease;
+  }
+  .search-row input:focus{border-color:var(--line-bright);}
+  .clear-filter{
+    display:none;
+    background:var(--panel);
+    border:1px solid var(--line);
+    color:var(--muted);
+    font-family:'IBM Plex Mono',monospace;
+    font-size:11px;
+    border-radius:6px;
+    padding:10px 12px;
+    cursor:pointer;
+  }
+  .clear-filter:hover{border-color:var(--line-bright);color:var(--silk);}
+  .clear-filter.show{display:inline-block;}
+
+  .empty-state{
+    display:none;
+    padding:22px;
+    text-align:center;
+    color:var(--muted);
+    font-family:'IBM Plex Mono',monospace;
+    font-size:12.5px;
+    border:1px solid var(--line);
+    border-radius:8px;
+    background:var(--panel);
   }
-  .search-row input:focus{border-color:var(--solder);}
+  .empty-state.show{display:block;}
+
   .project-card{
     cursor:pointer;
-    transition:border-color 0.15s ease, transform 0.15s ease;
+    transition:border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
+    display:block;
+    width:100%;
+    text-align:left;
+    font:inherit;
+    color:inherit;
   }
-  .project-card:hover{border-color:var(--solder);transform:translateY(-1px);}
+  .project-card:hover,.project-card:focus-visible{
+    border-color:var(--line-bright);
+    transform:translateY(-1px);
+    box-shadow:0 1px 0 rgba(255,255,255,0.04) inset, 0 14px 28px -16px rgba(0,0,0,0.65);
+  }
+  .project-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
   .project-card h3{font-family:'IBM Plex Mono',monospace;font-size:16px;color:var(--silk);margin:0 0 14px;font-weight:600;}
   .project-meta{
     display:grid;
@@ -240,18 +286,19 @@
     gap:12px;
     margin-bottom:14px;
     padding-bottom:14px;
-    border-bottom:1px dashed var(--line-bright);
+    border-bottom:1px solid var(--line);
   }
   .project-meta div{font-size:12px;}
-  .project-meta b{display:block;color:var(--solder);font-family:'IBM Plex Mono',monospace;font-size:12.5px;margin-bottom:3px;}
+  .project-meta b{display:block;color:var(--silk);font-family:'IBM Plex Mono',monospace;font-size:12.5px;margin-bottom:3px;}
   .project-meta span{color:var(--muted);}
   .project-card p.hint{font-size:12px;color:var(--muted);margin:0;font-family:'IBM Plex Mono',monospace;}
+
   .team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
   .team-card{text-align:center;}
   .avatar{
     width:34px;height:34px;
     margin:0 auto 10px;
-    border:1px solid var(--solder);
+    border:1px solid var(--accent);
     border-radius:50%;
     position:relative;
   }
@@ -260,21 +307,23 @@
     position:absolute;
     inset:6px;
     border-radius:50%;
-    background:var(--solder);
-    opacity:0.35;
+    background:var(--accent);
+    opacity:0.4;
   }
   .team-card b{display:block;font-family:'IBM Plex Mono',monospace;font-size:13.5px;color:var(--silk);margin-bottom:4px;}
-  .team-card span{font-size:11.5px;color:var(--muted);}
+  .team-card span{font-size:11.5px;color:var(--muted);font-family:'IBM Plex Mono',monospace;}
+
   .features{
     display:grid;
     grid-template-columns:repeat(2,1fr);
     gap:9px 22px;
-    font-size:13px;
+    font-size:13.5px;
     margin:0;
     padding:0;
   }
   .features li{list-style:none;padding-left:16px;position:relative;color:var(--muted);}
-  .features li::before{content:"—";position:absolute;left:0;color:var(--solder);}
+  .features li::before{content:"—";position:absolute;left:0;color:var(--accent);}
+
   footer{
     display:flex;
     align-items:center;
@@ -286,47 +335,66 @@
     font-family:'IBM Plex Mono',monospace;
   }
   footer .flinks a{text-decoration:none;color:var(--text);margin-left:14px;}
-  footer .flinks a:hover{color:var(--solder);}
+  footer .flinks a:hover{color:var(--accent);}
+
+  .toast{
+    position:fixed;
+    bottom:22px;
+    left:50%;
+    transform:translateX(-50%) translateY(12px);
+    background:linear-gradient(180deg, var(--panel-2), var(--panel));
+    border:1px solid var(--line-bright);
+    color:var(--silk);
+    font-family:'IBM Plex Mono',monospace;
+    font-size:12px;
+    padding:10px 16px;
+    border-radius:7px;
+    opacity:0;
+    pointer-events:none;
+    box-shadow:0 16px 32px -12px rgba(0,0,0,0.6);
+    transition:opacity 0.18s ease, transform 0.18s ease;
+    z-index:5;
+  }
+  .toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
+
   @media (max-width:720px){
     .metrics{grid-template-columns:repeat(2,1fr);}
     .metric{border-bottom:1px solid var(--line-bright);}
     .focus-grid,.team-grid{grid-template-columns:1fr;}
     .project-meta{grid-template-columns:repeat(2,1fr);}
-    h1{font-size:27px;}
+    h1{font-size:28px;}
   }
   @media print{
-    .circuit-bg,.pulse-layer,.cursor-glow,#theme-toggle,.theme-row,.search-row{display:none;}
+    .star-stage,.cursor-glow,#theme-toggle,.theme-row,.search-row,.toast{display:none;}
     body{background:#fff;color:#000;}
   }
 </style>
 </head>
 <body>
 
-<svg class="circuit-bg" viewBox="0 0 1440 900" preserveAspectRatio="xMidYMid slice">
-  <path d="M40,120 H320 V40 H660"/>
-  <path d="M40,340 H220 V520 H520 V680"/>
-  <path d="M960,50 V220 H1260 V50"/>
-  <path d="M1120,420 H1400 V300"/>
-  <path d="M60,760 H400 V860"/>
-  <path d="M720,800 H1040 V620 H1340"/>
-  <path d="M1380,700 V860 H1080"/>
-  <path d="M840,90 V260 H620 V90"/>
-  <circle cx="320" cy="120" r="3.2"/>
-  <circle cx="660" cy="40" r="3.2"/>
-  <circle cx="520" cy="520" r="3.2"/>
-  <circle cx="1260" cy="220" r="3.2"/>
-  <circle cx="1120" cy="420" r="3.2"/>
-  <circle cx="400" cy="760" r="3.2"/>
-  <circle cx="1040" cy="800" r="3.2"/>
-  <circle cx="840" cy="260" r="3.2"/>
-</svg>
-
-<div class="pulse-layer" aria-hidden="true">
-  <div class="pulse" style="offset-path:path('M40,120 H320 V40 H660');animation-duration:9s;animation-delay:-1s;"></div>
-  <div class="pulse" style="offset-path:path('M40,340 H220 V520 H520 V680');animation-duration:11s;animation-delay:-4s;"></div>
-  <div class="pulse" style="offset-path:path('M960,50 V220 H1260 V50');animation-duration:8s;animation-delay:-2.5s;"></div>
-  <div class="pulse" style="offset-path:path('M720,800 H1040 V620 H1340');animation-duration:12s;animation-delay:-6s;"></div>
-  <div class="pulse" style="offset-path:path('M840,90 V260 H620 V90');animation-duration:10s;animation-delay:-3s;"></div>
+<div class="star-stage" aria-hidden="true">
+  <svg class="starfield" viewBox="0 0 900 500" preserveAspectRatio="xMidYMid slice">
+    <circle cx="40" cy="60" r="1" fill="#fff" opacity="0.7"/>
+    <circle cx="120" cy="180" r="0.8" fill="#fff" opacity="0.5"/>
+    <circle cx="210" cy="40" r="1.1" fill="#fff" opacity="0.6"/>
+    <circle cx="300" cy="230" r="0.7" fill="#fff" opacity="0.4"/>
+    <circle cx="380" cy="90" r="1" fill="#fff" opacity="0.55"/>
+    <circle cx="460" cy="270" r="0.8" fill="#fff" opacity="0.5"/>
+    <circle cx="70" cy="330" r="0.9" fill="#fff" opacity="0.5"/>
+    <circle cx="160" cy="410" r="1" fill="#fff" opacity="0.6"/>
+    <circle cx="250" cy="130" r="0.7" fill="#fff" opacity="0.4"/>
+    <circle cx="520" cy="60" r="1" fill="#fff" opacity="0.55"/>
+    <circle cx="600" cy="200" r="0.8" fill="#fff" opacity="0.45"/>
+    <circle cx="670" cy="340" r="1.1" fill="#fff" opacity="0.6"/>
+    <circle cx="740" cy="120" r="0.7" fill="#fff" opacity="0.4"/>
+    <circle cx="820" cy="260" r="0.9" fill="#fff" opacity="0.5"/>
+    <circle cx="870" cy="70" r="1" fill="#fff" opacity="0.55"/>
+    <circle cx="30" cy="440" r="0.8" fill="#fff" opacity="0.45"/>
+    <circle cx="500" cy="400" r="0.7" fill="#fff" opacity="0.4"/>
+    <circle cx="780" cy="430" r="1" fill="#fff" opacity="0.5"/>
+    <circle cx="350" cy="330" r="0.6" fill="#fff" opacity="0.35"/>
+    <circle cx="630" cy="30" r="0.8" fill="#fff" opacity="0.45"/>
+  </svg>
 </div>
 
 <div class="cursor-glow"></div>
@@ -345,11 +413,11 @@
       <span class="brand-name">CUBIC</span>
     </div>
     <nav>
-      <a href="https://github.com/Cubic-Labs" target="_blank">GitHub</a>
-      <a href="https://huggingface.co/Cubic" target="_blank">HuggingFace</a>
+      <a href="https://github.com/Cubic-Labs" target="_blank" rel="noopener">GitHub</a>
+      <a href="https://huggingface.co/Cubic" target="_blank" rel="noopener">HuggingFace</a>
       <div class="theme-row">
         <span class="switch-label">0</span>
-        <button id="theme-toggle" aria-label="Toggle theme"></button>
+        <button id="theme-toggle" type="button" aria-label="Toggle light and dark theme" aria-pressed="false"></button>
         <span class="switch-label">1</span>
       </div>
     </nav>
@@ -369,20 +437,33 @@
 
   <section>
     <h2>Research Focus</h2>
-    <div class="focus-grid">
-      <div class="card focus-card"><b>AGI Research</b><p>Advancing towards artificial general intelligence.</p></div>
-      <div class="card focus-card"><b>AI Development</b><p>CPU-first architectures and open-source models.</p></div>
-      <div class="card focus-card"><b>Cybersecurity</b><p>AI-powered security tools and threat detection.</p></div>
+    <div class="focus-grid" id="focus-grid">
+      <button type="button" class="card focus-card" data-filter="agi">
+        <b>AGI Research</b>
+        <p>Advancing towards artificial general intelligence.</p>
+        <em>Filter projects →</em>
+      </button>
+      <button type="button" class="card focus-card" data-filter="cpu-first code">
+        <b>AI Development</b>
+        <p>CPU-first architectures and open-source models.</p>
+        <em>Filter projects →</em>
+      </button>
+      <button type="button" class="card focus-card" data-filter="security">
+        <b>Cybersecurity</b>
+        <p>AI-powered security tools and threat detection.</p>
+        <em>Filter projects →</em>
+      </button>
     </div>
   </section>
 
   <section>
     <h2>Projects</h2>
     <div class="search-row">
-      <input id="search" type="text" placeholder="Search projects — press / to focus">
+      <input id="search" type="text" placeholder="Search projects — press / to focus" aria-label="Search projects">
+      <button type="button" class="clear-filter" id="clear-filter">clear filter ×</button>
     </div>
     <div id="project-list">
-      <div class="card project-card" data-name="axl cpu-first code generation">
+      <div class="card project-card" data-name="axl cpu-first code generation" tabindex="0" role="button" aria-label="Open AXL project on HuggingFace">
         <h3>AXL — CPU-First Code Generation</h3>
         <div class="project-meta">
           <div><b>27</b><span>models, 566K–318M params</span></div>
@@ -393,13 +474,14 @@
         <p class="hint">&gt; click for the full AXL detail page</p>
       </div>
     </div>
+    <div class="empty-state" id="empty-state">No projects match that search. Press Esc to reset.</div>
   </section>
 
   <section>
     <h2>Team</h2>
     <div class="team-grid">
-      <div class="card team-card"><div class="avatar"></div><b>Kennedy</b><span>CEO & Head of AI Research</span></div>
-      <div class="card team-card"><div class="avatar"></div><b>Jasser</b><span>CTO & Head of Cybersecurity</span></div>
+      <div class="card team-card"><div class="avatar"></div><b>Kennedy</b><span>CEO &amp; Head of AI Research</span></div>
+      <div class="card team-card"><div class="avatar"></div><b>Jasser</b><span>CTO &amp; Head of Cybersecurity</span></div>
       <div class="card team-card"><div class="avatar"></div><b>Taem</b><span>Head of Marketing/Sales/Technical Assist</span></div>
     </div>
   </section>
@@ -410,7 +492,7 @@
       <li>Dark/Light theme toggle</li>
       <li>Category filtering on projects</li>
       <li>Search across projects</li>
-      <li>Interactive circuit-trace background</li>
+      <li>Layered 3D sun backdrop</li>
       <li>Keyboard shortcuts (/ to search, Esc to close)</li>
       <li>Print-friendly CSS</li>
       <li>Responsive design</li>
@@ -420,51 +502,152 @@
   <footer>
     <span>CPU-first AI for everyone.</span>
     <span class="flinks">
-      <a href="https://github.com/Cubic-Labs" target="_blank">GitHub</a>
-      <a href="https://huggingface.co/Cubic" target="_blank">HuggingFace</a>
+      <a href="https://github.com/Cubic-Labs" target="_blank" rel="noopener">GitHub</a>
+      <a href="https://huggingface.co/Cubic" target="_blank" rel="noopener">HuggingFace</a>
     </span>
   </footer>
 </div>
 
+<div class="toast" id="toast" role="status" aria-live="polite"></div>
+
 <script>
-  const root = document.documentElement;
-  const toggle = document.getElementById('theme-toggle');
-  toggle.addEventListener('click', () => {
-    const isLight = root.getAttribute('data-theme') === 'light';
-    root.setAttribute('data-theme', isLight ? 'dark' : 'light');
+(function(){
+  'use strict';
+
+  var root = document.documentElement;
+  var toast = document.getElementById('toast');
+  var toastTimer = null;
+
+  function showToast(msg){
+    toast.textContent = msg;
+    toast.classList.add('show');
+    clearTimeout(toastTimer);
+    toastTimer = setTimeout(function(){ toast.classList.remove('show'); }, 1800);
+  }
+
+  /* ---------- theme toggle ---------- */
+  var THEME_KEY = 'cubic-theme';
+  var toggle = document.getElementById('theme-toggle');
+
+  function applyTheme(mode){
+    root.setAttribute('data-theme', mode);
+    toggle.setAttribute('aria-pressed', mode === 'light' ? 'true' : 'false');
+  }
+
+  var storedTheme = null;
+  try { storedTheme = window.localStorage.getItem(THEME_KEY); } catch (e) { storedTheme = null; }
+  if (storedTheme === 'light' || storedTheme === 'dark') {
+    applyTheme(storedTheme);
+  } else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
+    applyTheme('light');
+  }
+
+  toggle.addEventListener('click', function(){
+    var next = root.getAttribute('data-theme') === 'light' ? 'dark' : 'light';
+    applyTheme(next);
+    try { window.localStorage.setItem(THEME_KEY, next); } catch (e) { /* storage unavailable, theme still applies for session */ }
+  });
+
+  /* ---------- search + category filter ---------- */
+  var search = document.getElementById('search');
+  var cards = Array.prototype.slice.call(document.querySelectorAll('.project-card'));
+  var emptyState = document.getElementById('empty-state');
+  var clearFilterBtn = document.getElementById('clear-filter');
+  var focusButtons = Array.prototype.slice.call(document.querySelectorAll('.focus-card'));
+  var activeCategory = '';
+
+  function runFilter(){
+    var q = search.value.trim().toLowerCase();
+    var visibleCount = 0;
+
+    cards.forEach(function(card){
+      var name = card.dataset.name || '';
+      var matchesText = name.indexOf(q) !== -1;
+      var matchesCategory = !activeCategory || name.indexOf(activeCategory) !== -1;
+      var visible = matchesText && matchesCategory;
+      card.style.display = visible ? '' : 'none';
+      if (visible) visibleCount++;
+    });
+
+    emptyState.classList.toggle('show', visibleCount === 0);
+    clearFilterBtn.classList.toggle('show', !!activeCategory);
+  }
+
+  search.addEventListener('input', runFilter);
+
+  focusButtons.forEach(function(btn){
+    btn.addEventListener('click', function(){
+      var filterValue = btn.dataset.filter || '';
+      var isSame = activeCategory === filterValue;
+      activeCategory = isSame ? '' : filterValue;
+
+      focusButtons.forEach(function(b){ b.classList.remove('active'); });
+      if (!isSame) btn.classList.add('active');
+
+      runFilter();
+      if (activeCategory) {
+        showToast('Filtered by ' + btn.querySelector('b').textContent);
+      } else {
+        showToast('Filter cleared');
+      }
+    });
   });
 
-  const search = document.getElementById('search');
-  const cards = document.querySelectorAll('.project-card');
-  search.addEventListener('input', () => {
-    const q = search.value.toLowerCase();
-    cards.forEach(c => { c.style.display = c.dataset.name.includes(q) ? '' : 'none'; });
+  clearFilterBtn.addEventListener('click', function(){
+    activeCategory = '';
+    focusButtons.forEach(function(b){ b.classList.remove('active'); });
+    runFilter();
+    showToast('Filter cleared');
   });
 
-  document.addEventListener('keydown', e => {
-    if (e.key === '/' && document.activeElement !== search) {
+  /* ---------- keyboard shortcuts ---------- */
+  document.addEventListener('keydown', function(e){
+    var tag = document.activeElement ? document.activeElement.tagName : '';
+    var typing = tag === 'INPUT' || tag === 'TEXTAREA';
+
+    if (e.key === '/' && !typing) {
       e.preventDefault();
       search.focus();
     }
     if (e.key === 'Escape') {
-      search.value = '';
-      search.dispatchEvent(new Event('input'));
+      if (search.value) {
+        search.value = '';
+        runFilter();
+      }
+      if (activeCategory) {
+        activeCategory = '';
+        focusButtons.forEach(function(b){ b.classList.remove('active'); });
+        runFilter();
+      }
       search.blur();
     }
   });
 
-  cards.forEach(c => {
-    c.addEventListener('click', () => window.open('https://huggingface.co/Cubic', '_blank'));
+  /* ---------- project card open (click + keyboard) ---------- */
+  function openProject(card){
+    var url = card.dataset.url || 'https://huggingface.co/Cubic';
+    window.open(url, '_blank', 'noopener');
+  }
+
+  cards.forEach(function(card){
+    card.addEventListener('click', function(){ openProject(card); });
+    card.addEventListener('keydown', function(e){
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        openProject(card);
+      }
+    });
   });
 
-  const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+  /* ---------- cursor glow (perf-guarded, respects reduced motion) ---------- */
+  var reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
   if (!reduceMotion) {
-    let mx = window.innerWidth / 2, my = window.innerHeight / 3, ticking = false;
-    window.addEventListener('mousemove', e => {
+    var mx = window.innerWidth / 2, my = window.innerHeight / 3, ticking = false;
+    window.addEventListener('mousemove', function(e){
       mx = e.clientX; my = e.clientY;
       if (!ticking) {
         ticking = true;
-        requestAnimationFrame(() => {
+        requestAnimationFrame(function(){
           root.style.setProperty('--mx', mx + 'px');
           root.style.setProperty('--my', my + 'px');
           ticking = false;
@@ -473,9 +656,13 @@
     }, { passive: true });
   }
 
-  document.addEventListener('visibilitychange', () => {
+  document.addEventListener('visibilitychange', function(){
     document.body.classList.toggle('paused', document.hidden);
   });
+
+  /* initial paint */
+  runFilter();
+})();
 </script>
 </body>
 </html>