Spaces:

isr223
/

depthmap-trait-architect

Running

App Files Files Community

ia23s commited on Nov 24, 2025

Commit

b802579

verified ·

1 Parent(s): a118ffa

Promote version eaa93c4 to main

Browse files

Promoted commit eaa93c45d2f26302b825e3a4110c2eaa9bdc3d84 to main branch

Files changed (2) hide show

index.html +170 -119
style.css +76 -165

index.html CHANGED Viewed

@@ -37,186 +37,237 @@
     </script>
     <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=SF+Pro+Display:wght@300;400;500;600;700;800&family=SF+Pro+Text:wght@300;400;500;600&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="style.css" />
 </head>
-<body class="min-h-screen bg-black text-white selection:bg-gold-500 selection:text-black">
   <div id="app" class="relative min-h-screen flex flex-col">
-    <!-- Status Bar for iOS -->
-    <div class="h-11 bg-black/90 backdrop-blur-xl border-b border-white/5 flex items-center justify-between px-6 text-sm font-medium">
-      <div class="flex items-center gap-1">
-        <span class="font-semibold">9:41</span>
-      </div>
-      <div class="flex items-center gap-1">
-        <svg width="17" height="11" viewBox="0 0 17 11" class="opacity-80">
-          <rect x="1" y="3" width="15" height="7" rx="2" stroke="currentColor" fill="none"/>
-          <rect x="3" y="5" width="11" height="3" rx="1" fill="currentColor"/>
-        </svg>
-      </div>
-      <div class="flex items-center gap-1">
-        <svg width="17" height="11" viewBox="0 0 17 11" class="opacity-80">
-          <path d="M8.5 1l6.5 9H2L8.5 1z" stroke="currentColor" fill="currentColor" opacity="0.3"/>
-        </svg>
-        <svg width="2" height="4" class="opacity-60">
-          <circle cx="1" cy="2" r="1" fill="currentColor"/>
-          <circle cx="1" cy="2" r="1" fill="currentColor"/>
-        </svg>
-      </div>
     </div>
-    <!-- Header - iOS Style -->
-    <header class="w-full px-6 pt-4 pb-2 flex items-center justify-between">
       <div class="flex items-center gap-3">
-        <div class="w-8 h-8 rounded-xl bg-gradient-to-br from-gold-400 to-gold-600 flex items-center justify-center shadow-lg">
-          <svg width="16" height="16" viewBox="0 0 100 100" class="text-black">
-            <polygon points="50 15 85 35 85 65 50 85 15 65 15 35" fill="currentColor"></polygon>
           </svg>
         </div>
-        <div class="text-lg font-semibold tracking-tight">
-          Trait <span class="text-gold-400">Architect</span>
         </div>
       </div>
-      <button id="resetBtn" class="px-3 py-1.5 rounded-lg bg-white/10 hover:bg-white/15 text-sm font-medium transition-all duration-200">
-        Reset
-      </button>
     </header>
 <!-- Hero -->
-    <main id="hero" class="flex-1 flex flex-col justify-center px-6 -mt-6">
-      <div class="text-center space-y-6">
-        <h1 class="text-4xl leading-tight font-bold tracking-tight">
-          Map Your <span class="bg-gradient-to-r from-gold-400 to-gold-600 bg-clip-text text-transparent">Inner Landscape</span>
         </h1>
-        <p class="text-white/70 text-lg leading-relaxed max-w-sm mx-auto">
-          A premium, hexagonal journey through your core traits. Thoughtful insights, delivered elegantly.
         </p>
-        <div class="space-y-3 pt-4">
-          <button id="startBtn" class="w-full max-w-xs px-6 py-3.5 rounded-2xl bg-gradient-to-r from-gold-500 to-gold-600 text-black font-semibold text-lg shadow-xl hover:shadow-2xl hover:scale-[1.02] transition-all duration-200 active:scale-[0.98]">
-            Begin Assessment
           </button>
-          <button id="loadDemoBtn" class="w-full max-w-xs px-6 py-3.5 rounded-2xl bg-white/10 hover:bg-white/15 text-white font-medium text-lg transition-all duration-200 active:scale-[0.98] border border-white/20">
-            View Demo
           </button>
         </div>
       </div>
     </main>
     <!-- Test -->
-    <section id="test" class="hidden flex-1 px-6 pt-8 pb-6">
-      <div class="max-w-sm mx-auto space-y-6">
-        <div class="flex items-center justify-between">
-          <h2 class="text-xl font-semibold">Assessment</h2>
-          <div id="progress" class="text-sm text-white/50">1 / 16</div>
         </div>
-        <div id="questions" class="space-y-4"></div>
-        <div class="flex items-center justify-between pt-4">
-          <button id="backToHero" class="px-4 py-2 rounded-xl bg-white/10 hover:bg-white/15 text-sm font-medium transition-all duration-200">
-            Back
           </button>
           <div class="flex items-center gap-3">
-            <button id="prevBtn" class="px-4 py-2 rounded-xl bg-white/10 hover:bg-white/15 text-sm font-medium transition-all duration-200 disabled:opacity-40 disabled:cursor-not-allowed">Prev</button>
-            <button id="nextBtn" class="px-6 py-2 rounded-xl bg-gradient-to-r from-gold-500 to-gold-600 text-black font-semibold transition-all duration-200 disabled:opacity-40 disabled:cursor-not-allowed">Next</button>
           </div>
         </div>
       </div>
     </section>
-    <!-- Map -->
-    <section id="map" class="hidden flex-1 px-6 pt-8 pb-6">
-      <div class="max-w-sm mx-auto">
         <div class="flex items-center justify-between mb-6">
-          <div>
-            <h2 class="text-xl font-semibold">Your Map</h2>
-            <p class="text-sm text-white/50">Tap hexagons for insights</p>
           </div>
-          <div class="flex items-center gap-2">
-            <button id="retakeBtn" class="px-3 py-1.5 rounded-lg bg-white/10 hover:bg-white/15 text-xs font-medium transition-all duration-200">Retake</button>
-            <button id="exportBtn" class="px-3 py-1.5 rounded-lg bg-white/10 hover:bg-white/15 text-xs font-medium transition-all duration-200">Export</button>
           </div>
         </div>
-        <!-- Insight Banner -->
-        <div id="insightBanner" class="hidden mb-4 p-4 rounded-2xl bg-white/5 border border-white/10">
           <div class="flex items-start gap-3">
-            <div class="w-6 h-6 rounded-full bg-gold-500/20 flex items-center justify-center mt-0.5">
-              <div class="w-2 h-2 rounded-full bg-gold-400"></div>
             </div>
-            <p id="insightText" class="text-sm text-white/80 leading-relaxed"></p>
           </div>
         </div>
         <!-- Hex Grid -->
-        <div id="hexGrid" class="relative mx-auto" style="width: 100%; height: 420px;"></div>
         <!-- Legend -->
-        <div class="mt-6 flex items-center justify-center gap-6 text-xs text-white/60">
           <div class="flex items-center gap-2">
-            <span class="w-2 h-2 rounded-full" style="background: hsl(45 85% 55%);"></span>
-            <span>High</span>
           </div>
           <div class="flex items-center gap-2">
-            <span class="w-2 h-2 rounded-full" style="background: hsl(210 75% 55%);"></span>
             <span>Balanced</span>
           </div>
           <div class="flex items-center gap-2">
-            <span class="w-2 h-2 rounded-full" style="background: hsl(210 10% 45%);"></span>
-            <span>Emerging</span>
           </div>
         </div>
       </div>
     </section>
-    <!-- Detail Panel -->
     <div id="panel" class="fixed inset-0 pointer-events-none">
-      <div id="panelBackdrop" class="absolute inset-0 bg-black/50 opacity-0 transition-opacity duration-300"></div>
-      <aside id="panelContent" class="absolute bottom-0 left-0 right-0 bg-black/95 backdrop-blur-xl border-t border-white/10 translate-y-full transition-transform duration-300 pointer-events-auto rounded-t-3xl">
-        <div class="p-6">
-          <div class="w-8 h-1 bg-white/20 rounded-full mx-auto mb-4"></div>
-          <div class="flex items-start justify-between mb-4">
-            <div class="flex items-center gap-3">
-              <div id="panelBadge" class="w-3 h-3 rounded-full"></div>
-              <div>
-                <h3 id="panelTitle" class="text-xl font-semibold">Trait</h3>
-                <p id="panelSubtitle" class="text-sm text-white/50">Score</p>
-              </div>
             </div>
-            <button id="panelClose" class="p-2 rounded-xl bg-white/10 hover:bg-white/15">
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M6 6l12 12M6 18L18 6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
-            </button>
           </div>
-          <div class="space-y-4 max-h-96 overflow-y-auto">
-            <p id="panelDesc" class="text-white/80 leading-relaxed"></p>
-            <div class="p-4 rounded-2xl bg-white/5">
-              <div class="flex items-center justify-between mb-2">
-                <span class="text-sm text-white/70">Score</span>
-                <span id="panelScore" class="font-semibold"></span>
-              </div>
-              <div class="w-full h-2 rounded-full bg-white/10 overflow-hidden">
-                <div id="panelScoreBar" class="h-full bg-gradient-to-r from-gold-500 to-gold-600 transition-all duration-500"></div>
-              </div>
             </div>
-            <div class="space-y-3">
-              <h4 class="font-semibold text-white/90">Growth Path</h4>
-              <ul id="panelGrowth" class="space-y-2 text-sm text-white/70"></ul>
             </div>
-            <div class="space-y-3">
-              <h4 class="font-semibold text-white/90">Prompts</h4>
-              <ul id="panelPrompts" class="space-y-2 text-sm text-white/70 list-disc list-inside"></ul>
-            </div>
-            <div id="panelUnlock" class="hidden p-4 rounded-2xl bg-gold-500/10 border border-gold-500/30">
-              <p class="text-gold-300 text-sm" id="panelUnlockText"></p>
-            </div>
           </div>
         </div>
       </aside>
     </div>
-    <!-- Home Indicator -->
-    <div class="h-6 bg-black"></div>
   </div>
 <script src="script.js"></script>
 </body>
-</html>

     </script>
     <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=Montserrat:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="style.css" />
 </head>
+<body class="min-h-screen bg-slate-950 text-slate-100 selection:bg-gold-500 selection:text-slate-950">
   <div id="app" class="relative min-h-screen flex flex-col">
+    <!-- Background Decorative Glow -->
+    <div aria-hidden="true" class="pointer-events-none absolute inset-0 -z-10">
+      <div class="absolute top-1/4 left-1/2 -translate-x-1/2 w-[70vw] h-[70vw] opacity-30 blur-3xl rounded-full"
+           style="background: radial-gradient(closest-side, rgba(212,175,55,0.15), transparent 60%);"></div>
+      <div class="absolute bottom-0 right-0 w-[40vw] h-[40vw] opacity-20 blur-3xl rounded-full"
+           style="background: radial-gradient(closest-side, rgba(59,130,246,0.18), transparent 60%);"></div>
     </div>
+    <!-- Header -->
+    <header class="w-full px-6 md:px-10 py-5 flex items-center justify-center border-b border-white/5 bg-slate-950/50 backdrop-blur">
       <div class="flex items-center gap-3">
+        <div class="w-10 h-10 rounded-md bg-gold-500/20 flex items-center justify-center shadow-glow">
+          <svg width="20" height="20" viewBox="0 0 100 100" class="text-gold-500">
+            <polygon points="50 5 95 30 95 70 50 95 5 70 5 30" fill="currentColor"></polygon>
           </svg>
         </div>
+        <div class="text-xl font-bold tracking-wide">
+          DepthMap <span class="text-gold-500">Trait Architect</span>
         </div>
       </div>
+      <div class="absolute right-6 hidden md:flex items-center gap-3">
+        <button id="resetBtn" class="px-3 py-2 rounded-md bg-white/5 hover:bg-white/10 border border-white/10 text-sm transition">
+          Reset Assessment
+        </button>
+      </div>
     </header>
 <!-- Hero -->
+    <main id="hero" class="flex-1 grid place-items-center px-6">
+      <div class="max-w-3xl text-center">
+        <h1 class="text-4xl md:text-6xl font-extrabold tracking-tight">
+          Map Your <span class="text-gold-500">Inner Landscape</span>
         </h1>
+        <p class="mt-6 text-slate-300/90 text-lg md:text-xl leading-relaxed">
+          A golden-age inspired, hexagonal journey through your core traits. Answer thoughtful prompts to reveal a living map of who you are — and who you're becoming.
         </p>
+        <div class="mt-10 flex flex-col sm:flex-row items-center justify-center gap-4">
+          <button id="startBtn" class="px-6 py-3 rounded-lg bg-gold-500 text-slate-950 font-semibold shadow-glow hover:bg-gold-400 transition">
+            Begin Core Assessment
           </button>
+          <button id="loadDemoBtn" class="px-6 py-3 rounded-lg bg-white/5 hover:bg-white/10 border border-white/10 text-slate-100 transition">
+            Load Demo Scores
           </button>
         </div>
+        <p class="mt-4 text-xs text-slate-400">Secure local storage. Your development data stays private.</p>
       </div>
     </main>
     <!-- Test -->
+    <section id="test" class="hidden flex-1 px-6 md:px-10 py-10">
+      <div class="max-w-4xl mx-auto">
+        <div class="flex items-center justify-between mb-6">
+          <h2 class="text-2xl font-bold">Assessment</h2>
+          <div id="progress" class="text-sm text-slate-400">0 / 16</div>
         </div>
+        <div id="assessmentPhase" class="mb-6 p-3 rounded-lg border border-gold-500/30 bg-gold-500/10">
+          <div class="flex items-center gap-2">
+            <svg width="16" height="16" viewBox="0 0 24 24" class="text-gold-500">
+              <path d="M12 2l3 7h7l-5.5 4.2L18 21l-6-4-6 4 1.5-7.8L2 9h7l3-7z" fill="currentColor" opacity="0.3"/>
+              <circle cx="12" cy="12" r="3" fill="currentColor"/>
+            </svg>
+            <span id="phaseText" class="text-gold-300 text-sm font-medium">Core Assessment Phase</span>
+          </div>
+        </div>
+        <div id="questions" class="space-y-8"></div>
+        <div class="mt-10 flex items-center justify-between">
+          <button id="backToHero" class="px-4 py-2 rounded-md bg-white/5 hover:bg-white/10 border border-white/10 text-sm transition">
+            Back to Hero
           </button>
           <div class="flex items-center gap-3">
+            <button id="prevBtn" class="px-4 py-2 rounded-md bg-white/5 hover:bg-white/10 border border-white/10 text-sm transition disabled:opacity-40 disabled:cursor-not-allowed">Previous</button>
+            <button id="nextBtn" class="px-4 py-2 rounded-md bg-gold-500 text-slate-950 font-semibold hover:bg-gold-400 transition disabled:opacity-40 disabled:cursor-not-allowed">Next</button>
           </div>
         </div>
       </div>
     </section>
+    <!-- Extended Assessment -->
+    <section id="extendedTest" class="hidden flex-1 px-6 md:px-10 py-10">
+      <div class="max-w-4xl mx-auto">
         <div class="flex items-center justify-between mb-6">
+          <h2 class="text-2xl font-bold">Deep Dive Assessment</h2>
+          <div id="extendedProgress" class="text-sm text-slate-400">0 / 0</div>
+        </div>
+        <div class="mb-6 p-4 rounded-lg border border-blue-500/30 bg-blue-500/10">
+          <div class="flex items-start gap-3">
+            <svg width="18" height="18" viewBox="0 0 24 24" class="text-blue-400 mt-0.5">
+              <path d="M13 2.05v3.03c3.39.49 6 3.39 6 6.92 0 .9-.18 1.75-.48 2.54l2.6 1.53c.56-1.24.88-2.62.88-4.07 0-5.18-3.95-9.45-9-9.95zM12 19c-3.87 0-7-3.13-7-7 0-3.53 2.61-6.43 6-6.92V2.05c-5.06.5-9 4.76-9 9.95 0 5.52 4.47 10 9.99 10 3.31 0 6.24-1.61 8.06-4.09l-2.6-1.53C16.17 17.98 14.21 19 12 19z" fill="currentColor"/>
+            </svg>
+            <div>
+              <p class="text-blue-300 font-medium">Leadership & Influence Deep Analysis</p>
+              <p class="text-blue-200/80 text-sm mt-1">Based on your core traits, we've identified areas for deeper exploration, particularly around leadership potential and suggestibility.</p>
+            </div>
           </div>
+        </div>
+        <div id="extendedQuestions" class="space-y-8"></div>
+        <div class="mt-10 flex items-center justify-between">
+          <button id="backToCore" class="px-4 py-2 rounded-md bg-white/5 hover:bg-white/10 border border-white/10 text-sm transition">
+            Back to Core Map
+          </button>
+          <div class="flex items-center gap-3">
+            <button id="extendedPrevBtn" class="px-4 py-2 rounded-md bg-white/5 hover:bg-white/10 border border-white/10 text-sm transition disabled:opacity-40 disabled:cursor-not-allowed">Previous</button>
+            <button id="extendedNextBtn" class="px-4 py-2 rounded-md bg-blue-500 text-white font-semibold hover:bg-blue-400 transition disabled:opacity-40 disabled:cursor-not-allowed">Next</button>
           </div>
         </div>
+      </div>
+    </section>
+    <!-- Map -->
+    <section id="map" class="hidden flex-1 px-6 md:px-10 py-10">
+      <div class="max-w-6xl mx-auto">
+        <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-6">
+          <div>
+            <h2 class="text-2xl font-bold">Your Trait Map</h2>
+            <p class="text-slate-400 text-sm">Click any hexagon to inspect depth, growth paths, and coaching prompts.</p>
+          </div>
+          <div class="flex items-center gap-3">
+            <button id="retakeBtn" class="px-4 py-2 rounded-md bg-white/5 hover:bg-white/10 border border-white/10 text-sm transition">Retake Assessment</button>
+            <button id="deepDiveBtn" class="px-4 py-2 rounded-md bg-blue-500 hover:bg-blue-400 text-white font-medium transition">Deep Dive Analysis</button>
+            <button id="exportBtn" class="px-4 py-2 rounded-md bg-white/5 hover:bg-white/10 border border-white/10 text-sm transition">Export Snapshot</button>
+          </div>
+        </div>
+<!-- Insight Banner -->
+        <div id="insightBanner" class="hidden mb-6 p-4 rounded-lg border border-white/10 bg-white/5">
           <div class="flex items-start gap-3">
+            <div class="mt-0.5 text-gold-500">
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
+                <path d="M12 2l3 7h7l-5.5 4.2L18 21l-6-4-6 4 1.5-7.8L2 9h7l3-7z" stroke="currentColor" stroke-width="1.5" fill="currentColor" opacity="0.15"/>
+                <path d="M12 8v5m0 3h.01" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+              </svg>
+            </div>
+            <div>
+              <p id="insightText" class="text-slate-200"></p>
             </div>
           </div>
         </div>
         <!-- Hex Grid -->
+        <div id="hexGrid" class="relative mx-auto" style="width: min(100%, 980px); height: 560px;"></div>
+        <!-- Leadership Indicators -->
+        <div id="leadershipPanel" class="mt-6 p-4 rounded-lg border border-blue-500/30 bg-blue-500/10 hidden">
+          <div class="flex items-start gap-3">
+            <svg width="18" height="18" viewBox="0 0 24 24" class="text-blue-400 mt-0.5">
+              <path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z" fill="currentColor"/>
+            </svg>
+            <div>
+              <h4 class="font-semibold text-blue-300">Leadership Profile</h4>
+              <p class="text-blue-200/90 text-sm mt-1">Based on your suggestibility and leadership traits, we've identified key areas for development.</p>
+              <div id="leadershipInsights" class="mt-3 space-y-2"></div>
+            </div>
+          </div>
+        </div>
         <!-- Legend -->
+        <div class="mt-6 flex flex-wrap items-center gap-4 text-sm text-slate-300">
           <div class="flex items-center gap-2">
+            <span class="inline-block w-3 h-3 rounded-sm" style="background: hsl(45 85% 55%);"></span>
+            <span>High / well-developed</span>
           </div>
           <div class="flex items-center gap-2">
+            <span class="inline-block w-3 h-3 rounded-sm" style="background: hsl(210 75% 55%);"></span>
             <span>Balanced</span>
           </div>
           <div class="flex items-center gap-2">
+            <span class="inline-block w-3 h-3 rounded-sm" style="background: hsl(210 10% 45%);"></span>
+            <span>Latent / emerging</span>
           </div>
         </div>
       </div>
     </section>
+<!-- Detail Panel -->
     <div id="panel" class="fixed inset-0 pointer-events-none">
+      <div id="panelBackdrop" class="absolute inset-0 bg-black/60 opacity-0 transition-opacity"></div>
+      <aside id="panelContent" class="absolute right-0 top-0 h-full w-full max-w-md bg-slate-900 border-l border-white/10 translate-x-full transition-transform duration-300 pointer-events-auto shadow-2xl">
+        <div class="p-5 flex items-start justify-between">
+          <div>
+            <div class="flex items-center gap-2">
+              <div id="panelBadge" class="w-2 h-2 rounded-full"></div>
+              <h3 id="panelTitle" class="text-xl font-semibold">Trait</h3>
             </div>
+            <p id="panelSubtitle" class="text-sm text-slate-400 mt-1">Score</p>
           </div>
+          <button id="panelClose" class="p-2 rounded-md bg-white/5 hover:bg-white/10 border border-white/10">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M6 6l12 12M6 18L18 6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>
+          </button>
+        </div>
+        <div class="px-5 pb-6 overflow-y-auto h-[calc(100%-4rem)] space-y-5">
+          <p id="panelDesc" class="text-slate-200/90"></p>
+          <div class="rounded-lg border border-white/10 bg-white/5 p-4">
+            <div class="flex items-center justify-between">
+              <span class="text-slate-300">Current Score</span>
+              <span id="panelScore" class="font-semibold text-slate-100"></span>
             </div>
+            <div class="mt-2 w-full h-2 rounded bg-white/5 overflow-hidden">
+              <div id="panelScoreBar" class="h-full bg-gold-500"></div>
             </div>
+          </div>
+          <div>
+            <h4 class="font-semibold mb-2">Growth Path</h4>
+            <ul id="panelGrowth" class="space-y-2 text-slate-300/90"></ul>
+          </div>
+          <div>
+            <h4 class="font-semibold mb-2">Coaching Prompts</h4>
+            <ul id="panelPrompts" class="space-y-2 text-slate-300/90 list-disc list-inside"></ul>
+          </div>
+          <div id="panelUnlock" class="hidden p-4 rounded-lg border border-gold-500/30 bg-gold-500/10">
+            <p class="text-gold-300 text-sm" id="panelUnlockText"></p>
+          </div>
+          <!-- Leadership-specific insights -->
+          <div id="leadershipSection" class="hidden p-4 rounded-lg border border-blue-500/30 bg-blue-500/10">
+            <h4 class="font-semibold mb-2 text-blue-300">Leadership Context</h4>
+            <div id="leadershipContext" class="text-blue-200/90 text-sm space-y-2"></div>
           </div>
         </div>
       </aside>
     </div>
+    <!-- Footer -->
+    <footer class="px-6 md:px-10 py-6 text-xs text-slate-400 border-t border-white/5">
+      Built for clarity, curiosity, and growth. Secure local data storage.
+    </footer>
   </div>
 <script src="script.js"></script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
 </body>
+</html>

style.css CHANGED Viewed

@@ -1,104 +1,39 @@
-/* DepthMap Trait Architect - Smooth & Stable UI */
 /* Ensure smooth transitions and crisp rendering */
-* {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-tap-highlight-color: transparent;
-}
 /* Custom scrollbar for panel */
 #panelContent::-webkit-scrollbar { width: 8px; }
 #panelContent::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 8px; }
 #panelContent::-webkit-scrollbar-track { background: transparent; }
-/* Smooth background animations for touch devices */
-@keyframes subtleFlow {
-  0%, 100% {
-    transform: translateX(0) translateY(0) rotate(0deg);
-    filter: hue-rotate(0deg) brightness(1);
-  }
-  25% {
-    transform: translateX(1px) translateY(-1px) rotate(0.5deg);
-    filter: hue-rotate(10deg) brightness(1.02);
-  }
-  50% {
-    transform: translateX(0) translateY(0) rotate(0deg);
-    filter: hue-rotate(20deg) brightness(1.05);
-  }
-  75% {
-    transform: translateX(-1px) translateY(1px) rotate(-0.5deg);
-    filter: hue-rotate(10deg) brightness(1.02);
-  }
-}
-@keyframes gentleGlow {
-  0%, 100% {
-    opacity: 0.3;
-    transform: scale(1);
-  }
-  50% {
-    opacity: 0.5;
-    transform: scale(1.02);
-  }
-}
-/* Background elements with smooth animations */
-.bg-animated {
-  animation: subtleFlow 8s ease-in-out infinite;
-}
-.bg-glow {
-  animation: gentleGlow 4s ease-in-out infinite;
-}
-/* Touch device optimizations */
-@media (hover: none) and (pointer: coarse) {
-  .bg-animated {
-    animation: subtleFlow 12s ease-in-out infinite;
-  }
-  .bg-glow {
-    animation: gentleGlow 6s ease-in-out infinite;
-  }
-  /* Enhanced touch feedback */
-  .hex:active {
-    transform: scale(0.98);
-    transition: transform 100ms ease-out;
-  }
-}
-/* Honeycomb Grid Container - Stable positioning */
 #hexGrid {
   position: relative;
   margin: 0 auto;
-  contain: layout style paint;
 }
-/* Hex cell base - stable structure without ghosting */
 .hex {
   position: absolute;
   width: 140px;
-  height: 161.24px;
   clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
-  transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
-  will-change: transform, filter;
   cursor: pointer;
-  z-index: 1;
-  backface-visibility: hidden;
-  transform: translateZ(0);
 }
-/* Smooth hover effects without ghosting */
 .hex:hover {
-  transform: translateY(-4px) scale(1.02) translateZ(0);
-  filter: brightness(1.05);
   z-index: 10;
 }
-/* Stable hex inner content */
 .hex-inner {
   position: absolute;
   inset: 0;
@@ -108,28 +43,26 @@
   justify-content: center;
   text-align: center;
   padding: 16px;
-  background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.08));
-  backdrop-filter: blur(8px);
-  border: 1px solid rgba(255,255,255,0.25);
-  transition: all 200ms ease;
 }
-/* Hex label with stable positioning */
 .hex-label {
   font-weight: 700;
   letter-spacing: 0.02em;
   font-size: 13px;
   line-height: 1.2;
   color: #1e293b;
-  text-shadow: 0 1px 2px rgba(255,255,255,0.5);
   mix-blend-mode: luminosity;
   margin-bottom: 6px;
   max-width: 90%;
   word-wrap: break-word;
-  transition: color 200ms ease;
 }
-/* Smooth score badge */
 .hex-score {
   position: absolute;
   bottom: 8px;
@@ -137,84 +70,83 @@
   font-size: 11px;
   font-weight: 800;
   color: #1e293b;
-  background: rgba(255,255,255,0.9);
   padding: 3px 8px;
   border-radius: 12px;
   opacity: 0;
-  transform: translateY(4px) scale(0.95);
-  transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
   backdrop-filter: blur(10px);
-  border: 1px solid rgba(255,255,255,0.4);
 }
-/* Stable glow ring */
 .hex-ring {
   position: absolute;
-  inset: -6px;
   clip-path: inherit;
   z-index: -1;
-  filter: blur(8px);
-  opacity: 0.6;
-  transition: all 200ms ease;
-  transform: translateZ(0);
 }
 .hex:hover .hex-ring {
-  filter: blur(12px);
-  opacity: 0.8;
-  transform: scale(1.02) translateZ(0);
 }
-/* Smooth entrance animation */
-@keyframes smoothHexEnter {
   0% {
     opacity: 0;
-    transform: translateY(20px) scale(0.95) translateZ(0);
   }
   100% {
     opacity: 1;
-    transform: translateY(0) scale(1) translateZ(0);
   }
 }
 .hex {
-  animation: smoothHexEnter 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
   opacity: 0;
 }
-/* Staggered delays for smooth flow */
-.hex:nth-child(1) { animation-delay: 50ms; }
-.hex:nth-child(2) { animation-delay: 100ms; }
-.hex:nth-child(3) { animation-delay: 150ms; }
-.hex:nth-child(4) { animation-delay: 200ms; }
-.hex:nth-child(5) { animation-delay: 250ms; }
-.hex:nth-child(6) { animation-delay: 300ms; }
-.hex:nth-child(7) { animation-delay: 350ms; }
-.hex:nth-child(8) { animation-delay: 400ms; }
-.hex:nth-child(9) { animation-delay: 450ms; }
-/* Show score smoothly */
-.hex.revealed:hover .hex-score,
-.hex.revealed .hex-score {
-  opacity: 1;
-  transform: translateY(0) scale(1);
-}
-/* Panel transitions - smooth and stable */
 #panelContent.translate-x-0 { transform: translateX(0); }
 #panelBackdrop.opacity-100 { opacity: 1; }
-/* Enhanced panel backdrop with smooth blur */
 #panelBackdrop {
-  backdrop-filter: blur(6px);
-  transition: opacity 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
-/* Responsive hexagonal grid - maintain proportions */
 @media (max-width: 768px) {
   .hex {
     width: 120px;
-    height: 138.32px;
   }
   .hex-label { font-size: 12px; }
   .hex-score { font-size: 10px; }
@@ -223,38 +155,37 @@
 @media (max-width: 480px) {
   .hex {
     width: 100px;
-    height: 115.27px;
   }
   .hex-label { font-size: 11px; }
 }
-/* Smooth shadow transitions */
-.hex-inner {
-  box-shadow:
-    0 2px 16px rgba(0, 0, 0, 0.08),
-    inset 0 1px 0 rgba(255, 255, 255, 0.15),
-    inset 0 -1px 0 rgba(0, 0, 0, 0.05);
-  transition: all 200ms ease;
 }
-.hex:hover .hex-inner {
-  box-shadow:
-    0 6px 24px rgba(0, 0, 0, 0.12),
-    inset 0 1px 0 rgba(255, 255, 255, 0.25),
-    inset 0 -1px 0 rgba(0, 0, 0, 0.08);
 }
-/* Smooth button interactions */
-button {
-  transition: all 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
-  transform: translateZ(0);
 }
-button:active {
-  transform: scale(0.98);
 }
-/* Stable utility classes */
 .sr-only {
   position: absolute !important;
   height: 1px; width: 1px;
@@ -262,23 +193,3 @@ button:active {
   clip: rect(1px, 1px, 1px, 1px);
   white-space: nowrap;
 }
-/* Performance optimizations */
-.hex, .hex-inner, .hex-ring, .bg-animated, .bg-glow {
-  contain: layout style paint;
-  transform: translateZ(0);
-  backface-visibility: hidden;
-}
-/* Touch-optimized animations */
-@media (hover: none) {
-  .hex:hover {
-    transform: none;
-    filter: none;
-  }
-  .hex:active {
-    transform: scale(0.98) translateY(1px);
-    transition: transform 100ms ease;
-  }
-}

+/* DepthMap Trait Architect - Additional Styles */
 /* Ensure smooth transitions and crisp rendering */
+* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
 /* Custom scrollbar for panel */
 #panelContent::-webkit-scrollbar { width: 8px; }
 #panelContent::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 8px; }
 #panelContent::-webkit-scrollbar-track { background: transparent; }
+/* Honeycomb Grid Container */
 #hexGrid {
   position: relative;
   margin: 0 auto;
 }
+/* Hex cell base - pointy-top hexagons for better interlocking */
 .hex {
   position: absolute;
   width: 140px;
+  height: 161.24px; /* width * 0.866 for pointy-top hex height */
   clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
+  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
+  will-change: transform, filter, opacity;
   cursor: pointer;
 }
+/* Enhanced hover effects */
 .hex:hover {
+  transform: translateY(-8px) scale(1.03);
+  filter: brightness(1.1) saturate(1.1);
   z-index: 10;
 }
+/* Hex inner content with better positioning */
 .hex-inner {
   position: absolute;
   inset: 0;
   justify-content: center;
   text-align: center;
   padding: 16px;
+  background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255,255,255,0.2);
 }
+/* Hex label with improved typography */
 .hex-label {
   font-weight: 700;
   letter-spacing: 0.02em;
   font-size: 13px;
   line-height: 1.2;
   color: #1e293b;
+  text-shadow: 0 1px 2px rgba(255,255,255,0.4);
   mix-blend-mode: luminosity;
   margin-bottom: 6px;
   max-width: 90%;
   word-wrap: break-word;
 }
+/* Score badge with subtle animation */
 .hex-score {
   position: absolute;
   bottom: 8px;
   font-size: 11px;
   font-weight: 800;
   color: #1e293b;
+  background: rgba(255,255,255,0.85);
   padding: 3px 8px;
   border-radius: 12px;
   opacity: 0;
+  transform: translateY(8px) scale(0.9);
+  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
   backdrop-filter: blur(10px);
+  border: 1px solid rgba(255,255,255,0.3);
+}
+/* Show score on hover when trait is "unlocked" */
+.hex.revealed:hover .hex-score,
+.hex.revealed .hex-score {
+  opacity: 1;
+  transform: translateY(0) scale(1);
 }
+/* Glow ring with enhanced effects */
 .hex-ring {
   position: absolute;
+  inset: -8px;
   clip-path: inherit;
   z-index: -1;
+  filter: blur(12px);
+  opacity: 0.8;
+  transition: all 300ms ease;
 }
 .hex:hover .hex-ring {
+  filter: blur(16px);
+  opacity: 1;
+  transform: scale(1.05);
 }
+/* Loading animation for hex entrance */
+@keyframes hexFadeIn {
   0% {
     opacity: 0;
+    transform: translateY(30px) scale(0.8) rotate(-2deg);
   }
   100% {
     opacity: 1;
+    transform: translateY(0) scale(1) rotate(0deg);
   }
 }
 .hex {
+  animation: hexFadeIn 500ms ease-out forwards;
   opacity: 0;
 }
+/* Staggered animation delays for honeycombing effect */
+.hex:nth-child(1) { animation-delay: 0ms; }
+.hex:nth-child(2) { animation-delay: 50ms; }
+.hex:nth-child(3) { animation-delay: 100ms; }
+.hex:nth-child(4) { animation-delay: 150ms; }
+.hex:nth-child(5) { animation-delay: 200ms; }
+.hex:nth-child(6) { animation-delay: 250ms; }
+.hex:nth-child(7) { animation-delay: 300ms; }
+.hex:nth-child(8) { animation-delay: 350ms; }
+.hex:nth-child(9) { animation-delay: 400ms; }
+/* Panel transitions */
 #panelContent.translate-x-0 { transform: translateX(0); }
 #panelBackdrop.opacity-100 { opacity: 1; }
+/* Enhanced panel backdrop */
 #panelBackdrop {
+  backdrop-filter: blur(8px);
+  transition: opacity 250ms ease;
 }
+/* Responsive hexagonal grid */
 @media (max-width: 768px) {
   .hex {
     width: 120px;
+    height: 138.32px; /* width * 0.866 */
   }
   .hex-label { font-size: 12px; }
   .hex-score { font-size: 10px; }
 @media (max-width: 480px) {
   .hex {
     width: 100px;
+    height: 115.27px; /* width * 0.866 */
   }
   .hex-label { font-size: 11px; }
 }
+/* Pulse effect for interactive elements */
+@keyframes gentlePulse {
+  0%, 100% { transform: scale(1); }
+  50% { transform: scale(1.02); }
 }
+.hex:hover {
+  animation: gentlePulse 2s ease-in-out infinite;
 }
+/* Subtle shadow enhancement */
+.hex-inner {
+  box-shadow:
+    0 4px 20px rgba(0, 0, 0, 0.1),
+    inset 0 1px 0 rgba(255, 255, 255, 0.2),
+    inset 0 -1px 0 rgba(0, 0, 0, 0.1);
 }
+.hex:hover .hex-inner {
+  box-shadow:
+    0 8px 30px rgba(0, 0, 0, 0.15),
+    inset 0 1px 0 rgba(255, 255, 255, 0.3),
+    inset 0 -1px 0 rgba(0, 0, 0, 0.1);
 }
+/* Small utility for hidden but accessible labels */
 .sr-only {
   position: absolute !important;
   height: 1px; width: 1px;
   clip: rect(1px, 1px, 1px, 1px);
   white-space: nowrap;
 }