Heavier brutalist outlines — thicker borders, bolder SVG geometry

2px white borders on all dividers, search box, result cards, footer.
SVG shapes scaled up with 1.5-2px strokes, larger triangles/circles,
added diamond + square geometry, stronger constellation lines, bigger
pulsing nodes, heavier scan line. Chips invert to red fill on hover.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

static/index.html

@@ -32,26 +32,26 @@
 
   /* ── SVG Vector Background ── */
   .vector-bg {
-    position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .12;
+    position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .18;
   }
   .vector-bg line {
     stroke: var(--white);
-    stroke-width: .5;
+    stroke-width: 1.2;
   }
   .vector-bg circle {
     fill: none;
     stroke: var(--white);
-    stroke-width: .5;
+    stroke-width: 1.2;
   }
   .vector-bg .node {
     fill: var(--red);
-    opacity: .8;
+    opacity: 1;
   }
 
   /* Grid pulse */
   @keyframes gridFade {
-    0%, 100% { opacity: .08; }
-    50% { opacity: .18; }
+    0%, 100% { opacity: .15; }
+    50% { opacity: .35; }
   }
   .grid-line { animation: gridFade 6s ease-in-out infinite; }
   .grid-line:nth-child(odd) { animation-delay: -3s; }
@@ -87,7 +87,7 @@
   /* ── Header ── */
   .header {
     margin-bottom: 48px;
-    border-bottom: 1px solid var(--gray-2);
+    border-bottom: 2px solid var(--white);
     padding-bottom: 32px;
   }
   .header-top {
@@ -129,7 +129,7 @@
   .search-row {
     display: flex;
     gap: 0;
-    border: 1px solid var(--gray-2);
+    border: 2px solid var(--white);
     transition: border-color .2s;
   }
   .search-row:focus-within {
@@ -170,20 +170,22 @@
     margin-top: 16px;
   }
   .chip {
-    padding: 6px 14px;
-    border: 1px solid var(--gray-2);
+    padding: 7px 14px;
+    border: 1.5px solid var(--gray-5);
     background: transparent;
     font-family: 'JetBrains Mono', monospace;
     font-size: .7rem;
-    color: var(--gray-4);
+    color: var(--gray-5);
     cursor: pointer;
     transition: all .15s;
     letter-spacing: .5px;
   }
   .chip:hover {
     border-color: var(--red);
+    background: var(--red);
     color: var(--white);
   }
+  .chip:hover .lang { color: var(--white); }
   .chip .lang {
     color: var(--red);
     font-weight: 600;
@@ -194,7 +196,7 @@
   .results { display: flex; flex-direction: column; gap: 0; }
 
   .result-card {
-    border-top: 1px solid var(--gray-2);
+    border-top: 2px solid var(--white);
     padding: 24px 0;
     display: grid;
     grid-template-columns: 48px 1fr;
@@ -203,7 +205,7 @@
     transform: translateY(12px);
     animation: cardIn .4s ease forwards;
   }
-  .result-card:last-child { border-bottom: 1px solid var(--gray-2); }
+  .result-card:last-child { border-bottom: 2px solid var(--white); }
 
   @keyframes cardIn {
     to { opacity: 1; transform: translateY(0); }
@@ -222,9 +224,9 @@
     line-height: 1;
   }
   .rank-line {
-    width: 1px;
+    width: 2px;
     flex: 1;
-    background: var(--gray-2);
+    background: var(--white);
     margin-top: 8px;
     min-height: 20px;
   }
@@ -247,8 +249,8 @@
   }
   .score-track {
     flex: 1;
-    height: 2px;
-    background: var(--gray-2);
+    height: 3px;
+    background: rgba(245,245,240,.15);
     position: relative;
     overflow: hidden;
   }
@@ -280,8 +282,8 @@
   .empty-state {
     padding: 64px 20px;
     text-align: center;
-    border-top: 1px solid var(--gray-2);
-    border-bottom: 1px solid var(--gray-2);
+    border-top: 2px solid var(--white);
+    border-bottom: 2px solid var(--white);
   }
   .empty-state svg {
     margin-bottom: 24px;
@@ -305,14 +307,14 @@
 
   /* ── Skeleton ── */
   .skeleton-card {
-    border-top: 1px solid var(--gray-2);
+    border-top: 2px solid var(--white);
     padding: 24px 0;
     display: grid;
     grid-template-columns: 48px 1fr;
     gap: 0 20px;
     animation: pulse 1.5s ease-in-out infinite;
   }
-  .skeleton-card:last-child { border-bottom: 1px solid var(--gray-2); }
+  .skeleton-card:last-child { border-bottom: 2px solid var(--white); }
   .skel-rank {
     width: 24px; height: 32px;
     background: var(--gray-2);
@@ -331,7 +333,7 @@
   .footer {
     margin-top: 48px;
     padding-top: 24px;
-    border-top: 1px solid var(--gray-2);
+    border-top: 2px solid var(--white);
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -375,40 +377,53 @@
 
   <!-- Floating triangles -->
   <g class="geo-float-1" transform="translate(150,120)">
-    <polygon points="0,-20 17,10 -17,10" fill="none" stroke="#E63327" stroke-width=".8" opacity=".5"/>
+    <polygon points="0,-35 30,18 -30,18" fill="none" stroke="#E63327" stroke-width="2" opacity=".7"/>
   </g>
   <g class="geo-float-2" transform="translate(820,300)">
-    <polygon points="0,-28 24,14 -24,14" fill="none" stroke="#F5F5F0" stroke-width=".6" opacity=".3"/>
+    <polygon points="0,-45 39,23 -39,23" fill="none" stroke="#F5F5F0" stroke-width="1.5" opacity=".5"/>
   </g>
   <g class="geo-float-3" transform="translate(700,750)">
-    <polygon points="0,-18 16,9 -16,9" fill="none" stroke="#E63327" stroke-width=".7" opacity=".4"/>
+    <polygon points="0,-30 26,15 -26,15" fill="none" stroke="#E63327" stroke-width="1.8" opacity=".6"/>
+  </g>
+  <g class="geo-float-1" transform="translate(50,400)">
+    <rect x="-18" y="-18" width="36" height="36" fill="none" stroke="#F5F5F0" stroke-width="1.5" opacity=".35"/>
+  </g>
+  <g class="geo-float-3" transform="translate(950,550)">
+    <polygon points="0,-22 21,0 0,22 -21,0" fill="none" stroke="#E63327" stroke-width="1.5" opacity=".45"/>
   </g>
 
   <!-- Floating circles -->
   <g class="geo-float-2" transform="translate(100,650)">
-    <circle cx="0" cy="0" r="18" stroke-width=".6" opacity=".25"/>
+    <circle cx="0" cy="0" r="30" stroke-width="1.5" opacity=".4"/>
   </g>
   <g class="geo-float-1" transform="translate(880,150)">
-    <circle cx="0" cy="0" r="12" stroke-width=".6" opacity=".2"/>
+    <circle cx="0" cy="0" r="22" stroke-width="1.5" opacity=".35"/>
+  </g>
+  <g class="geo-float-3" transform="translate(500,850)">
+    <circle cx="0" cy="0" r="16" stroke-width="1.2" opacity=".3"/>
   </g>
 
-  <!-- Constellation nodes -->
-  <line x1="150" y1="120" x2="400" y2="200" stroke-width=".3" opacity=".15" stroke="#E63327"/>
-  <line x1="400" y1="200" x2="600" y2="150" stroke-width=".3" opacity=".1" stroke="#F5F5F0"/>
-  <line x1="600" y1="150" x2="820" y2="300" stroke-width=".3" opacity=".12" stroke="#E63327"/>
-  <line x1="820" y1="300" x2="700" y2="750" stroke-width=".3" opacity=".08" stroke="#F5F5F0"/>
+  <!-- Constellation lines -->
+  <line x1="150" y1="120" x2="400" y2="200" stroke-width="1" opacity=".25" stroke="#E63327"/>
+  <line x1="400" y1="200" x2="600" y2="150" stroke-width=".8" opacity=".2" stroke="#F5F5F0"/>
+  <line x1="600" y1="150" x2="820" y2="300" stroke-width="1" opacity=".25" stroke="#E63327"/>
+  <line x1="820" y1="300" x2="700" y2="750" stroke-width=".8" opacity=".15" stroke="#F5F5F0"/>
+  <line x1="100" y1="650" x2="150" y2="120" stroke-width=".8" opacity=".15" stroke="#F5F5F0"/>
+  <line x1="700" y1="750" x2="500" y2="850" stroke-width=".8" opacity=".2" stroke="#E63327"/>
 
-  <circle class="node" cx="400" cy="200"><animate attributeName="r" values="2;3.5;2" dur="4s" repeatCount="indefinite"/></circle>
-  <circle class="node" cx="600" cy="150"><animate attributeName="r" values="1.5;3;1.5" dur="5s" repeatCount="indefinite"/></circle>
-  <circle class="node" cx="200" cy="600"><animate attributeName="r" values="2;4;2" dur="3.5s" repeatCount="indefinite"/></circle>
-  <circle class="node" cx="750" cy="500"><animate attributeName="r" values="1.5;3;1.5" dur="4.5s" repeatCount="indefinite"/></circle>
+  <!-- Constellation nodes -->
+  <circle class="node" cx="400" cy="200"><animate attributeName="r" values="3;6;3" dur="4s" repeatCount="indefinite"/></circle>
+  <circle class="node" cx="600" cy="150"><animate attributeName="r" values="2.5;5;2.5" dur="5s" repeatCount="indefinite"/></circle>
+  <circle class="node" cx="200" cy="600"><animate attributeName="r" values="3;6.5;3" dur="3.5s" repeatCount="indefinite"/></circle>
+  <circle class="node" cx="750" cy="500"><animate attributeName="r" values="2.5;5;2.5" dur="4.5s" repeatCount="indefinite"/></circle>
+  <circle class="node" cx="500" cy="850"><animate attributeName="r" values="2;4.5;2" dur="3.8s" repeatCount="indefinite"/></circle>
 
   <!-- Scan line -->
-  <rect class="scan-line" x="0" y="0" width="1000" height="1" fill="url(#scanGrad)"/>
+  <rect class="scan-line" x="0" y="0" width="1000" height="2" fill="url(#scanGrad)"/>
   <defs>
     <linearGradient id="scanGrad" x1="0%" y1="0%" x2="100%" y2="0%">
       <stop offset="0%" stop-color="#E63327" stop-opacity="0"/>
-      <stop offset="50%" stop-color="#E63327" stop-opacity=".4"/>
+      <stop offset="50%" stop-color="#E63327" stop-opacity=".7"/>
       <stop offset="100%" stop-color="#E63327" stop-opacity="0"/>
     </linearGradient>
   </defs>
@@ -442,10 +457,10 @@
   <!-- Results -->
   <div id="results" class="results">
     <div class="empty-state">
-      <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <circle cx="24" cy="24" r="22" stroke="#F5F5F0" stroke-width="1"/>
-        <line x1="12" y1="24" x2="36" y2="24" stroke="#E63327" stroke-width="1"/>
-        <line x1="24" y1="12" x2="24" y2="36" stroke="#E63327" stroke-width="1"/>
+      <svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <circle cx="28" cy="28" r="26" stroke="#F5F5F0" stroke-width="2"/>
+        <line x1="14" y1="28" x2="42" y2="28" stroke="#E63327" stroke-width="2"/>
+        <line x1="28" y1="14" x2="28" y2="42" stroke="#E63327" stroke-width="2"/>
       </svg>
       <h3>VECTOR SEARCH</h3>
       <p>Cross-lingual semantic retrieval over SciFact scientific abstracts. Type a query or select a language sample above.</p>