From 0bff5f349a460f4b517b39c09ac6133021b55c1c Mon Sep 17 00:00:00 2001
From: samantha42 <zipfriis@gmail.com>
Date: Sat, 30 May 2026 16:49:18 +0200
Subject: [PATCH] components load

---
 static/components/games.html       |  59 +--
 static/components/themetoggle.html |  20 +
 static/index.html                  |  55 +--
 static/output.css                  | 625 +----------------------------
 tailwind.sh                        |   1 +
 5 files changed, 59 insertions(+), 701 deletions(-)
 create mode 100644 static/components/themetoggle.html

diff --git a/static/components/games.html b/static/components/games.html
index c3ad5c1..9c36c07 100644
--- a/static/components/games.html
+++ b/static/components/games.html
@@ -1,26 +1,33 @@
-<div class="flex justify-center flex-wrap gap-6 p-5">
-  <div class="flex flex-col items-center gap-2">
-    <img src="/static/gamesbanners/minecraft.webp" class="w-42 h-20 object-cover rounded-lg">
-    <p class="text-xs text-center">Minecraft</p>
-  </div>
-  <div class="flex flex-col items-center gap-2">
-    <img src="/static/gamesbanners/Tombraider.png" class="w-42 h-20 object-cover rounded-lg">
-    <p class="text-xs text-center">Rise of the Tomb Raider</p>
-  </div>
-  <div class="flex flex-col items-center gap-2">
-    <img src="/static/gamesbanners/planetzoo.webp" class="w-42 h-20 object-cover rounded-lg">
-    <p class="text-xs text-center">Planet Zoo</p>
-  </div>
-  <div class="flex flex-col items-center gap-2">
-    <img src="/static/gamesbanners/gtav.webp" class="w-42 h-20 object-cover rounded-lg">
-    <p class="text-xs text-center">GTA V</p>
-  </div>
-  <div class="flex flex-col items-center gap-2">
-    <img src="/static/gamesbanners/factorio.jpg" class="w-42 h-20 object-cover rounded-lg">
-    <p class="text-xs text-center">Factorio</p>
-  </div>
-  <div class="flex flex-col items-center gap-2">
-    <img src="/static/gamesbanners/detroitbecomehuman.jpg" class="w-42 h-20 object-cover rounded-lg">
-    <p class="text-xs text-center">Detroit: Become Human</p>
-  </div>
-</div>
\ No newline at end of file
+<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1.5rem; padding: 20px;">
+              
+              <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
+                <img src="/static/gamesbanners/minecraft.webp" height="100" width="190" style="object-fit: cover; border-radius: 8px;">
+                <p style="margin: 0; text-align: center;">Minecraft</p>
+              </div>
+
+              <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
+                <img src="/static/gamesbanners/Tombraider.png" height="100" width="190" style="object-fit: cover; border-radius: 8px;">
+                <p style="margin: 0; text-align: center;">Rise of the Tomb Raider</p>
+              </div>
+
+              <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
+                <img src="/static/gamesbanners/planetzoo.webp" height="100" width="190" style="object-fit: cover; border-radius: 8px;">
+                <p style="margin: 0; text-align: center;">Planet Zoo</p>
+              </div>
+
+              <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
+                <img src="/static/gamesbanners/gtav.webp" height="100" width="190" style="object-fit: cover; border-radius: 8px;">
+                <p style="margin: 0; text-align: center;">GTA V</p>
+              </div>
+
+              <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
+                <img src="/static/gamesbanners/factorio.jpg" height="100" width="190" style="object-fit: cover; border-radius: 8px;">
+                <p style="margin: 0; text-align: center;">Factorio</p>
+              </div>
+
+              <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
+                <img src="/static/gamesbanners/detroitbecomehuman.jpg" height="100" width="190" style="object-fit: cover; border-radius: 8px;">
+                <p style="margin: 0; text-align: center;">Detroit: Become Human</p>
+              </div>
+
+            </div>
\ No newline at end of file
diff --git a/static/components/themetoggle.html b/static/components/themetoggle.html
new file mode 100644
index 0000000..9c43010
--- /dev/null
+++ b/static/components/themetoggle.html
@@ -0,0 +1,20 @@
+<div class="row">
+        <div class="toggle-wrap" role="switch" aria-checked="true" tabindex="0" id="toggle"
+          aria-label="Toggle day/night mode">
+          <div class="track day" id="track">
+            <div class="stars">
+              <div class="star"></div>
+              <div class="star"></div>
+              <div class="star"></div>
+              <div class="star"></div>
+              <div class="star"></div>
+            </div>
+          </div>
+          <div class="knob day" id="knob">
+            <div class="sun-rays" id="rays"></div>
+            <div class="moon-crater" style="width:4px;height:4px;top:3px;left:5px;"></div>
+            <div class="moon-crater" style="width:3px;height:3px;top:9px;left:9px;"></div>
+            <div class="moon-crater" style="width:2px;height:2px;top:4px;left:11px;"></div>
+          </div>
+        </div>
+      </div>
\ No newline at end of file
diff --git a/static/index.html b/static/index.html
index 57bb547..eca27a8 100644
--- a/static/index.html
+++ b/static/index.html
@@ -31,25 +31,8 @@
 
   <div class="shell">
     <aside>
-      <div class="row">
-        <div class="toggle-wrap" role="switch" aria-checked="true" tabindex="0" id="toggle"
-          aria-label="Toggle day/night mode">
-          <div class="track day" id="track">
-            <div class="stars">
-              <div class="star"></div>
-              <div class="star"></div>
-              <div class="star"></div>
-              <div class="star"></div>
-              <div class="star"></div>
-            </div>
-          </div>
-          <div class="knob day" id="knob">
-            <div class="sun-rays" id="rays"></div>
-            <div class="moon-crater" style="width:4px;height:4px;top:3px;left:5px;"></div>
-            <div class="moon-crater" style="width:3px;height:3px;top:9px;left:9px;"></div>
-            <div class="moon-crater" style="width:2px;height:2px;top:4px;left:11px;"></div>
-          </div>
-        </div>
+      <div hx-get="/static/components/themetoggle.html" hx-trigger="load" hx-swap="outerHTML">
+        <span class="spinner">Loading toggle...</span>
       </div>
       <div>
         <p class="sidebar-label">navigate</p>
@@ -385,38 +368,8 @@
               <h2>Games</h2>
             </div>
             <p class="exp-body" >Game i will play in my free time to wind down.</p>
-           <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1.5rem; padding: 20px;">
-              
-              <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
-                <img src="/static/gamesbanners/minecraft.webp" height="100" width="190" style="object-fit: cover; border-radius: 8px;">
-                <p style="margin: 0; text-align: center;">Minecraft</p>
-              </div>
-
-              <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
-                <img src="/static/gamesbanners/Tombraider.png" height="100" width="190" style="object-fit: cover; border-radius: 8px;">
-                <p style="margin: 0; text-align: center;">Rise of the Tomb Raider</p>
-              </div>
-
-              <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
-                <img src="/static/gamesbanners/planetzoo.webp" height="100" width="190" style="object-fit: cover; border-radius: 8px;">
-                <p style="margin: 0; text-align: center;">Planet Zoo</p>
-              </div>
-
-              <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
-                <img src="/static/gamesbanners/gtav.webp" height="100" width="190" style="object-fit: cover; border-radius: 8px;">
-                <p style="margin: 0; text-align: center;">GTA V</p>
-              </div>
-
-              <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
-                <img src="/static/gamesbanners/factorio.jpg" height="100" width="190" style="object-fit: cover; border-radius: 8px;">
-                <p style="margin: 0; text-align: center;">Factorio</p>
-              </div>
-
-              <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
-                <img src="/static/gamesbanners/detroitbecomehuman.jpg" height="100" width="190" style="object-fit: cover; border-radius: 8px;">
-                <p style="margin: 0; text-align: center;">Detroit: Become Human</p>
-              </div>
-
+            <div hx-get="/static/components/games.html" hx-trigger="load" hx-swap="outerHTML">
+              <span class="spinner">Loading stats…</span>
             </div>
           </div>
         </section>
diff --git a/static/output.css b/static/output.css
index 2832d56..abc7a33 100644
--- a/static/output.css
+++ b/static/output.css
@@ -1,624 +1 @@
-.theme-root.night {
-  --bg: #1c1c1c;
-  --surface: #252525;
-  --surface2: #2a2a2a;
-  --border: #363636;
-  --border2: #ccc7be;
-  --text: #ffffff;
-  --muted: #d9d9d9;
-  --dim: #b0aa9f;
-  --navback: rgba(28, 28, 28, 0.8);
-  --accent: #5389ff;
-  --accent2:#1447b8;
-  --green:#0eaf74;
-  --amber:#ffd78e;
-}
-
-.theme-root {
-    --bg:#f7f6f3;
-    --surface:#ffffff;
-    --surface2:#f0eeea;
-    --border:#e2ddd6;
-    --border2:#ccc7be;
-    --text:#1a1917;
-    --muted:#6b6560;
-    --dim:#b0aa9f;
-    --accent:#1a56db;
-    --accent2:#1447b8;
-    --green:#0a7c52;
-    --amber:#92620a;
-    --navback: rgba(247,246,243,0.8)
-    --ff-mono:'IBM Plex Mono',monospace;
-    --ff-sans:'IBM Plex Sans',sans-serif;
-  }
-
-*{box-sizing:border-box;margin:0;padding:0;}
-html{font-size:15px;scroll-behavior:smooth;}
-body{
-  background:var(--bg);
-  color:var(--text);
-  font-family:var(--ff-sans);
-  font-weight:300;
-  line-height:1.7;
-  min-height:100vh;
-}
-
-/* subtle dot grid */
-body::before{
-  content:'';
-  position:fixed;inset:0;
-  background-image:radial-gradient(circle, var(--border) 1px, transparent 1px);
-  background-size:24px 24px;
-  opacity:0.5;
-  pointer-events:none;z-index:0;
-}
-
-nav{
-  position:sticky;top:0;z-index:100;
-  background: var(--navback);
-  backdrop-filter:blur(10px);
-  border-bottom:1px solid var(--border);
-  padding:0 clamp(1rem,5vw,3rem);
-  display:flex;align-items:center;justify-content:space-between;
-  height:52px;
-}
-.nav-logo{
-  font-family:var(--ff-mono);font-size:0.78rem;font-weight:500;
-  color:var(--accent);text-decoration:none;
-  display:flex;align-items:center;gap:6px;
-}
-.nav-logo::before{content:'>';color:var(--green);font-weight:500;}
-.nav-links{display:flex;gap:0.2rem;align-items:center;}
-.nav-links a{
-  font-family:var(--ff-mono);font-size:0.72rem;
-  color:var(--muted);text-decoration:none;
-  padding:0.3rem 0.7rem;border-radius:4px;
-  transition:color 0.15s,background 0.15s;
-}
-.nav-links a:hover{color:var(--text);background:var(--surface2);}
-.nav-links .cta{color:var(--accent);border:1px solid var(--accent);margin-left:0.4rem;}
-.nav-links .cta:hover{background:var(--accent2);color:#fff;}
-
-.shell{
-  position:relative;z-index:1;
-  display:grid;
-  grid-template-columns:220px 1fr;
-  min-height:calc(100vh - 52px);
-  max-width:1100px;
-  margin:0 auto;
-}
-
-
-.sidebar-links a.hidden {
-  opacity: 0;
-  transition: opacity 0.4s linear;
-}
-
-.sidebar-links:hover a.hidden {
-   opacity: 1;
-}
-
-aside{
-  border-right:1px solid var(--border);
-  padding:2.5rem 1.5rem;
-  display:flex;flex-direction:column;gap:1rem;
-  position:sticky;top:52px;height:calc(100vh - 52px);
-  overflow-y:auto;
-  background:var(--surface);
-}
-.sidebar-label{
-  font-family:var(--ff-mono);font-size:0.65rem;
-  letter-spacing:0.2em;text-transform:uppercase;
-  color:var(--dim);margin-bottom:0.8rem;
-}
-.sidebar-links{display:flex;flex-direction:column;gap:2px;}
-.sidebar-links a{
-  font-family:var(--ff-mono);font-size:0.78rem;color:var(--muted);
-  text-decoration:none;padding:0.3rem 0.6rem;border-radius:4px;
-  transition:color 0.15s,background 0.15s;
-  display:flex;align-items:center;gap:6px;
-}
-.sidebar-links a::before{content:'//';color:var(--dim);font-size:0.65rem;}
-.sidebar-links a:hover{color:var(--text);background:var(--surface2);}
-.skill-list{display:flex;flex-direction:column;gap:4px;}
-.skill-item{
-  font-family:var(--ff-mono);font-size:0.78rem;
-  color:var(--muted);padding:0.3rem 0.6rem;
-  border-left:2px solid var(--border2);
-  transition:border-color 0.15s,color 0.15s;cursor:default;
-}
-.skill-item:hover{border-color:var(--accent);color:var(--text);}
-
-main{
-  padding:3rem clamp(1.5rem,4vw,3rem);
-  display:flex;flex-direction:column;gap:4rem;
-}
-
-.hero-eyebrow{
-  font-family:var(--ff-mono);font-size:0.72rem;color:var(--green);
-  letter-spacing:0.18em;margin-bottom:1rem;
-  display:flex;align-items:center;gap:8px;
-}
-.hero-eyebrow::before{content:'';display:block;width:20px;height:1px;background:var(--green);}
-h1{
-  font-family:var(--ff-mono);
-  font-size:clamp(1.8rem,4vw,2.8rem);
-  font-weight:500;color:var(--text);
-  letter-spacing:-0.02em;line-height:1.1;
-}
-h1 span{color:var(--accent);}
-.hero-bio{
-  margin-top:1.2rem;font-size:0.9rem;color:var(--muted);
-  max-width:560px;line-height:1.8;
-}
-.hero-meta{
-  margin-top:1.5rem;display:flex;gap:1.5rem;flex-wrap:wrap;
-  font-family:var(--ff-mono);font-size:0.72rem;color:var(--dim);
-}
-.hero-meta span{display:flex;align-items:center;gap:5px;}
-
-@keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.35;}}
-
-.section-head{display:flex;align-items:center;gap:10px;margin-bottom:1.8rem;}
-.section-head h2{
-  font-family:var(--ff-mono);font-size:0.72rem;font-weight:400;
-  letter-spacing:0.25em;text-transform:uppercase;color:var(--muted);
-  white-space:nowrap;
-}
-.section-head::after{content:'';flex:1;height:1px;background:var(--border);}
-
-.exp-grid{display:flex;flex-direction:column;gap:8px;}
-.exp-card{
-  background:var(--surface);border:1px solid var(--border);
-  border-radius:6px;padding:1.4rem 1.5rem;
-  transition:border-color 0.2s,box-shadow 0.2s;
-}
-.exp-card:hover{border-color:var(--border2);box-shadow:0 2px 12px rgba(0,0,0,0.06);}
-.exp-header{
-  display:flex;align-items:baseline;justify-content:space-between;
-  margin-bottom:0.6rem;flex-wrap:wrap;gap:0.5rem;
-}
-.exp-title{font-family:var(--ff-mono);font-size:0.9rem;font-weight:500;color:var(--text);}
-.exp-tag{
-  font-family:var(--ff-mono);font-size:0.65rem;
-  letter-spacing:0.1em;text-transform:uppercase;
-  background:rgba(26,86,219,0.07);color:var(--accent);
-  border:1px solid rgba(26,86,219,0.2);
-  padding:2px 8px;border-radius:3px;
-}
-.exp-body{font-size:0.85rem;color:var(--muted);line-height:1.8;}
-
-.edu-grid{display:flex;flex-direction:column;gap:8px;}
-.edu-card{
-  display:grid;grid-template-columns:80px 1fr;gap:1.2rem;
-  background:var(--surface);border:1px solid var(--border);
-  border-radius:6px;padding:1.2rem 1.4rem;
-  transition:border-color 0.2s,box-shadow 0.2s;
-}
-.edu-card:hover{border-color:var(--border2);box-shadow:0 2px 12px rgba(0,0,0,0.06);}
-.edu-year{font-family:var(--ff-mono);font-size:0.7rem;color:var(--amber);padding-top:2px;line-height:1.6;}
-.edu-degree{font-size:0.9rem;font-weight:500;color:var(--text);}
-.edu-inst{font-family:var(--ff-mono);font-size:0.75rem;color:var(--muted);margin-top:2px;}
-.edu-detail{font-size:0.82rem;color:var(--dim);margin-top:4px;}
-
-.lang-row{display:flex;gap:0.6rem;flex-wrap:wrap;}
-.lang-badge{
-  font-family:var(--ff-mono);font-size:0.78rem;color:var(--text);
-  background:var(--surface);border:1px solid var(--border);
-  padding:0.35rem 0.9rem;border-radius:4px;
-}
-
-.interests-row{display:flex;gap:0.6rem;flex-wrap:wrap;}
-.interest-chip{
-  font-family:var(--ff-mono);font-size:0.75rem;color:var(--muted);
-  background:var(--surface);border:1px solid var(--border);
-  padding:0.3rem 0.75rem;border-radius:4px;
-}
-.interest-chip::before{content:'# ';color:var(--dim);}
-
-.opinion-grid{display:flex;flex-wrap:wrap;gap:0.6rem;}
-.opinion-link{
-  font-family:var(--ff-mono);font-size:0.78rem;
-  color:var(--muted);text-decoration:none;
-  background:var(--surface);border:1px solid var(--border);
-  padding:0.4rem 0.9rem;border-radius:4px;
-  display:flex;align-items:center;gap:6px;
-  transition:border-color 0.2s,color 0.2s,box-shadow 0.2s;
-}
-.opinion-link::before{content:'→';color:var(--dim);font-size:0.75rem;}
-.opinion-link:hover{border-color:var(--accent2);color:var(--text);box-shadow:0 2px 8px rgba(0,0,0,0.06);}
-
-footer{
-  position:relative;z-index:1;
-  border-top:1px solid var(--border);
-  padding:1.4rem clamp(1rem,5vw,3rem);
-  display:flex;align-items:center;justify-content:space-between;
-  flex-wrap:wrap;gap:0.5rem;
-  background:var(--surface);
-}
-.footer-contact a{font-family:var(--ff-mono);font-size:0.78rem;color:var(--accent);text-decoration:none;}
-.footer-contact a:hover{text-decoration:underline;}
-.footer-copy{font-family:var(--ff-mono);font-size:0.7rem;color:var(--dim);}
-
-@keyframes fadeUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
-.hero{animation:fadeUp 0.6s ease both;}
-.exp-card:nth-child(1){animation:fadeUp 0.5s 0.05s ease both;}
-.exp-card:nth-child(2){animation:fadeUp 0.5s 0.12s ease both;}
-.edu-card:nth-child(1){animation:fadeUp 0.5s 0.08s ease both;}
-.edu-card:nth-child(2){animation:fadeUp 0.5s 0.15s ease both;}
-
-@media(max-width:700px){
-  .shell{grid-template-columns:1fr;}
-  aside{display:none;}
-  .edu-card{grid-template-columns:1fr;gap:0.3rem;}
-}
-
-  .edu-tag {
-    display: inline-block;
-    margin-top: 8px;
-    font-family: 'DM Mono', monospace;
-    font-size: 9px;
-    letter-spacing: 0.1em;
-    text-transform: uppercase;
-    padding: 3px 5px;
-    border-radius: 3px;
-  }
- 
-  .tag-dropped {
-    background: var(--surface2);
-    color: var(--amber);
-  }
-
-
-.toplist-ranked li {
-  display: flex;
-  align-items: center;
-  gap: 14px;
-  counter-increment: rank;
-}
-
-.toplist-ranked {
-  counter-reset: rank;
-}
-
-.toplist-ranked li::before {
-  content: counter(rank);
-  font-family: 'DM Mono', monospace;
-  font-size: 11px;
-  color: var(--muted);
-  min-width: 16px;
-  text-align: right;
-}
-
-.toplist-ranked li img {
-  width: 42px;
-  height: 62px;
-  object-fit: cover;
-  border-radius: 4px;
-  flex-shrink: 0;
-}
-
-.toplist-toggle {
-  display: block;
-  width: 100%;
-  text-align: center;
-}
-
-.poster-grid {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  gap: 1.5rem;
-  padding: 1rem 0;
-}
-
-.poster-item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 120px;
-}
-
-.poster-item img {
-  width: 120px;
-  height: 180px;
-  object-fit: cover;
-  border-radius: 6px;
-}
-
-.poster-item p {
-  margin-top: 8px;
-  font-size: 12px;
-  text-align: center;
-  line-height: 1.4;
-}
-
-.game-grid {
-  justify-content: center;
-  gap: 1.5rem;
-  padding: 1rem 0;
-}
-
-.game-item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 180px;
-}
-
-.page-header {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  margin-bottom: 2.5rem;
-}
-
-.page-title {
-  font-family: var(--ff-mono);
-  font-size: clamp(1rem, 4vw, 2rem);
-  font-weight: 500;
-  letter-spacing: -0.02em;
-  line-height: 1;
-  color: var(--accent);
-}
-
-.page-title::before {
-  content: '> ';
-  color: var(--green);
-  font-weight: 500;
-}
-
-.page-sub {
-  font-family: var(--ff-mono);
-  font-size: 0.72rem;
-  color: var(--muted);
-  letter-spacing: 0.08em;
-  padding-left: 1.1rem;
-}
-
-
-.posterhover:hover   img  {
-  transform: scale(1.07);
-}
-
-
-#rain-canvas {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  z-index: 999;
-  opacity: 0;
-  transition: opacity 0.8s ease;
-}
-
-#dragon-grid {
-  position: fixed;
-  top: 0;
-  left: 0;
-  pointer-events: none;
-  z-index: 999;
-  opacity: 0.15;
-}
-
-
-.outlink {font-family:var(--ff-mono);font-size:0.78rem;color:var(--accent);text-decoration:none;}
-.outlink:hover{text-decoration:underline;}
-
-a{
-  font-family:var(--ff-mono);font-size:0.78rem;color:var(--muted);
-  text-decoration:none;padding:0.3rem 0.6rem;border-radius:4px;
-  transition:color 0.15s,background 0.15s;
-  display:flex;align-items:center;gap:6px;
-}
-
-
-.rabbit-svg path { fill: gray; transition: fill 0.3s ease; }
-.rabbit-svg:hover path { fill: #7F77DD; }
-
-
-
-
-.scene {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: 2rem 1rem;
-    gap: 1rem;
-    font-family: var(--font-sans);
-  }
-  .toggle-wrap {
-    position: relative;
-    width: 50px;
-    height: 25px;
-    cursor: pointer;
-    -webkit-tap-highlight-color: transparent;
-  }
-  .track {
-    position: absolute;
-    inset: 0;
-    width: 50px;
-    height: 25px;
-    border-radius: 12.5px;
-    transition: background 0.5s ease;
-    overflow: hidden;
-  }
-  .track.day { background: #87CEEB; }
-  .track.night { background: #1a1a3e; }
-  .stars {
-    position: absolute;
-    inset: 0;
-    opacity: 0;
-    transition: opacity 0.4s ease;
-  }
-  .night .stars { opacity: 1; }
-  .star {
-    position: absolute;
-    background: white;
-    border-radius: 50%;
-    animation: twinkle 2s infinite;
-  }
-  .star:nth-child(1) { width:2px; height:2px; top:4px;  left:6px;  animation-delay:0s; }
-  .star:nth-child(2) { width:1px; height:1px; top:10px; left:14px; animation-delay:0.4s; }
-  .star:nth-child(3) { width:1px; height:1px; top:5px;  left:22px; animation-delay:0.8s; }
-  .star:nth-child(4) { width:2px; height:2px; top:14px; left:10px; animation-delay:1.2s; }
-  .star:nth-child(5) { width:1px; height:1px; top:8px;  left:30px; animation-delay:0.2s; }
-  @keyframes twinkle {
-    0%,100% { opacity:1; } 50% { opacity:0.3; }
-  }
-  .knob {
-    position: absolute;
-    top: 3px;
-    width: 19px;
-    height: 19px;
-    border-radius: 50%;
-    transition: left 0.45s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 2;
-  }
-  .knob.night {
-    left: 3px;
-    background: radial-gradient(circle at 35% 35%, #e8e8ff, #c8c8f8);
-    box-shadow:
-      0 0 0 2px rgba(180,180,255,0.18),
-      0 0 7px 4px rgba(140,140,255,0.35),
-      0 0 14px 6px rgba(100,100,220,0.18);
-  }
-  .knob.day {
-    left: 28px;
-    background: radial-gradient(circle at 40% 40%, #fff8c5, #FFD700);
-    box-shadow:
-      0 0 0 3px rgba(255,220,0,0.25),
-      0 0 8px 4px rgba(255,200,0,0.45),
-      0 0 16px 6px rgba(255,160,0,0.2);
-  }
-  .sun-rays {
-    position: absolute;
-    inset: -7px;
-    opacity: 0;
-    transition: opacity 0.3s ease 0.15s;
-    pointer-events: none;
-  }
-  .knob.day .sun-rays { opacity: 1; }
-  .ray {
-    position: absolute;
-    width: 1.5px;
-    height: 4px;
-    background: rgba(255,220,0,0.9);
-    border-radius: 1px;
-    left: 50%;
-    transform-origin: 50% 16px;
-    margin-left: -0.75px;
-  }
-  .moon-crater {
-    position: absolute;
-    border-radius: 50%;
-    background: rgba(140,140,200,0.4);
-    transition: opacity 0.3s ease;
-  }
-  .knob.day .moon-crater { opacity: 0; }
-  .knob.night .moon-crater { opacity: 1; }
-  .label {
-    font-size: 13px;
-    font-weight: 500;
-    letter-spacing: 0.03em;
-    transition: color 0.4s ease;
-    user-select: none;
-  }
-  .label.day-label { color: #B8860B; }
-  .label.night-label { color: #9090d0; }
-  .state-label {
-    font-size: 11px;
-    color: var(--color-text-secondary);
-    letter-spacing: 0.05em;
-    text-transform: uppercase;
-  }
-  .row {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-  }
-  .copy-block {
-    background: var(--color-background-secondary);
-    border: 0.5px solid var(--color-border-tertiary);
-    border-radius: var(--border-radius-lg);
-    padding: 1rem 1.25rem;
-    width: 100%;
-    max-width: 420px;
-  }
-  .copy-block p { margin: 0 0 8px; font-size: 13px; color: var(--color-text-secondary); }
-  .copy-block code {
-    font-family: var(--font-mono);
-    font-size: 12px;
-    color: var(--color-text-primary);
-    display: block;
-    white-space: nowrap;
-    overflow-x: auto;
-  }
-  .copy-btn {
-    margin-top: 10px;
-    font-size: 12px;
-    padding: 4px 10px;
-    border-radius: var(--border-radius-md);
-    cursor: pointer;
-    border: 0.5px solid var(--color-border-secondary);
-    background: transparent;
-    color: var(--color-text-secondary);
-  }
-  .copy-btn:hover { background: var(--color-background-secondary); }
-
-.Hitchhiker {
-  max-width: 480px;
-  width: 100%;
-  text-align: center;
-  display:  none;
-}
-.matrix-hidden {
-  display: none;
-  color: green;
-  font-family: var(--ff-mono);
-  font-size: 0.72rem;
-  letter-spacing: 0.08em;
-  padding-left: 1.1rem;
-}
-
-.dot {
-    width: 6px;
-    height: 6px;
-    border-radius: 50%;
-    display: inline-block;
-    animation: pulse 2s infinite;
-}
-.dot--available { background: var(--green); }
-.dot--busy      { background: red; }
-
-/* styles2.css */
-.overlay {
-  position: fixed;
-  inset: 0;                          /* top/right/bottom/left: 0 */
-  background: rgba(0, 0, 0, 0.6);   /* semi-transparent dark */
-  z-index: 100;
-  display: none;
-  align-items: center;
-  justify-content: center;
-}
-button {
-  font-family:var(--ff-mono);font-size:0.65rem;
-  letter-spacing:0.1em;text-transform:uppercase;
-  background:rgba(26,86,219,0.07);color:var(--accent);
-  border:1px solid rgba(26,86,219,0.2);
-  padding:2px 8px;border-radius:3px;
-}
-
-button:hover {
-  border:1px solid rgb(26, 87, 219);
-}
-
-.hidden {
-  display: none;
-}
\ No newline at end of file
+.theme-root.night{--bg:#1c1c1c;--surface:#252525;--surface2:#2a2a2a;--border:#363636;--border2:#ccc7be;--text:#fff;--muted:#d9d9d9;--dim:#b0aa9f;--navback:#1c1c1ccc;--accent:#5389ff;--accent2:#1447b8;--green:#0eaf74;--amber:#ffd78e}.theme-root{--bg:#f7f6f3;--surface:#fff;--surface2:#f0eeea;--border:#e2ddd6;--border2:#ccc7be;--text:#1a1917;--muted:#6b6560;--dim:#b0aa9f;--accent:#1a56db;--accent2:#1447b8;--green:#0a7c52;--amber:#92620a;--navback:#f7f6f3cc --ff-mono:"IBM Plex Mono",monospace;--ff-sans:"IBM Plex Sans",sans-serif}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;font-size:15px}body{background:var(--bg);color:var(--text);font-family:var(--ff-sans);min-height:100vh;font-weight:300;line-height:1.7}body:before{content:"";background-image:radial-gradient(circle, var(--border) 1px, transparent 1px);opacity:.5;pointer-events:none;z-index:0;background-size:24px 24px;position:fixed;inset:0}nav{z-index:100;background:var(--navback);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;height:52px;padding:0 clamp(1rem,5vw,3rem);display:flex;position:sticky;top:0}.nav-logo{font-family:var(--ff-mono);color:var(--accent);align-items:center;gap:6px;font-size:.78rem;font-weight:500;text-decoration:none;display:flex}.nav-logo:before{content:">";color:var(--green);font-weight:500}.nav-links{align-items:center;gap:.2rem;display:flex}.nav-links a{font-family:var(--ff-mono);color:var(--muted);border-radius:4px;padding:.3rem .7rem;font-size:.72rem;text-decoration:none;transition:color .15s,background .15s}.nav-links a:hover{color:var(--text);background:var(--surface2)}.nav-links .cta{color:var(--accent);border:1px solid var(--accent);margin-left:.4rem}.nav-links .cta:hover{background:var(--accent2);color:#fff}.shell{z-index:1;grid-template-columns:220px 1fr;max-width:1100px;min-height:calc(100vh - 52px);margin:0 auto;display:grid;position:relative}.sidebar-links a.hidden{opacity:0;transition:opacity .4s linear}.sidebar-links:hover a.hidden{opacity:1}aside{border-right:1px solid var(--border);background:var(--surface);flex-direction:column;gap:1rem;height:calc(100vh - 52px);padding:2.5rem 1.5rem;display:flex;position:sticky;top:52px;overflow-y:auto}.sidebar-label{font-family:var(--ff-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-bottom:.8rem;font-size:.65rem}.sidebar-links{flex-direction:column;gap:2px;display:flex}.sidebar-links a{font-family:var(--ff-mono);color:var(--muted);border-radius:4px;align-items:center;gap:6px;padding:.3rem .6rem;font-size:.78rem;text-decoration:none;transition:color .15s,background .15s;display:flex}.sidebar-links a:before{content:"//";color:var(--dim);font-size:.65rem}.sidebar-links a:hover{color:var(--text);background:var(--surface2)}.skill-list{flex-direction:column;gap:4px;display:flex}.skill-item{font-family:var(--ff-mono);color:var(--muted);border-left:2px solid var(--border2);cursor:default;padding:.3rem .6rem;font-size:.78rem;transition:border-color .15s,color .15s}.skill-item:hover{border-color:var(--accent);color:var(--text)}main{flex-direction:column;gap:4rem;padding:3rem clamp(1.5rem,4vw,3rem);display:flex}.hero-eyebrow{font-family:var(--ff-mono);color:var(--green);letter-spacing:.18em;align-items:center;gap:8px;margin-bottom:1rem;font-size:.72rem;display:flex}.hero-eyebrow:before{content:"";background:var(--green);width:20px;height:1px;display:block}h1{font-family:var(--ff-mono);color:var(--text);letter-spacing:-.02em;font-size:clamp(1.8rem,4vw,2.8rem);font-weight:500;line-height:1.1}h1 span{color:var(--accent)}.hero-bio{color:var(--muted);max-width:560px;margin-top:1.2rem;font-size:.9rem;line-height:1.8}.hero-meta{font-family:var(--ff-mono);color:var(--dim);flex-wrap:wrap;gap:1.5rem;margin-top:1.5rem;font-size:.72rem;display:flex}.hero-meta span{align-items:center;gap:5px;display:flex}@keyframes pulse{0%,to{opacity:1}50%{opacity:.35}}.section-head{align-items:center;gap:10px;margin-bottom:1.8rem;display:flex}.section-head h2{font-family:var(--ff-mono);letter-spacing:.25em;text-transform:uppercase;color:var(--muted);white-space:nowrap;font-size:.72rem;font-weight:400}.section-head:after{content:"";background:var(--border);flex:1;height:1px}.exp-grid{flex-direction:column;gap:8px;display:flex}.exp-card{background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:1.4rem 1.5rem;transition:border-color .2s,box-shadow .2s}.exp-card:hover{border-color:var(--border2);box-shadow:0 2px 12px #0000000f}.exp-header{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.5rem;margin-bottom:.6rem;display:flex}.exp-title{font-family:var(--ff-mono);color:var(--text);font-size:.9rem;font-weight:500}.exp-tag{font-family:var(--ff-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);background:#1a56db12;border:1px solid #1a56db33;border-radius:3px;padding:2px 8px;font-size:.65rem}.exp-body{color:var(--muted);font-size:.85rem;line-height:1.8}.edu-grid{flex-direction:column;gap:8px;display:flex}.edu-card{background:var(--surface);border:1px solid var(--border);border-radius:6px;grid-template-columns:80px 1fr;gap:1.2rem;padding:1.2rem 1.4rem;transition:border-color .2s,box-shadow .2s;display:grid}.edu-card:hover{border-color:var(--border2);box-shadow:0 2px 12px #0000000f}.edu-year{font-family:var(--ff-mono);color:var(--amber);padding-top:2px;font-size:.7rem;line-height:1.6}.edu-degree{color:var(--text);font-size:.9rem;font-weight:500}.edu-inst{font-family:var(--ff-mono);color:var(--muted);margin-top:2px;font-size:.75rem}.edu-detail{color:var(--dim);margin-top:4px;font-size:.82rem}.lang-row{flex-wrap:wrap;gap:.6rem;display:flex}.lang-badge{font-family:var(--ff-mono);color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:4px;padding:.35rem .9rem;font-size:.78rem}.interests-row{flex-wrap:wrap;gap:.6rem;display:flex}.interest-chip{font-family:var(--ff-mono);color:var(--muted);background:var(--surface);border:1px solid var(--border);border-radius:4px;padding:.3rem .75rem;font-size:.75rem}.interest-chip:before{content:"# ";color:var(--dim)}.opinion-grid{flex-wrap:wrap;gap:.6rem;display:flex}.opinion-link{font-family:var(--ff-mono);color:var(--muted);background:var(--surface);border:1px solid var(--border);border-radius:4px;align-items:center;gap:6px;padding:.4rem .9rem;font-size:.78rem;text-decoration:none;transition:border-color .2s,color .2s,box-shadow .2s;display:flex}.opinion-link:before{content:"→";color:var(--dim);font-size:.75rem}.opinion-link:hover{border-color:var(--accent2);color:var(--text);box-shadow:0 2px 8px #0000000f}footer{z-index:1;border-top:1px solid var(--border);background:var(--surface);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;padding:1.4rem clamp(1rem,5vw,3rem);display:flex;position:relative}.footer-contact a{font-family:var(--ff-mono);color:var(--accent);font-size:.78rem;text-decoration:none}.footer-contact a:hover{text-decoration:underline}.footer-copy{font-family:var(--ff-mono);color:var(--dim);font-size:.7rem}@keyframes fadeUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.hero{animation:.6s both fadeUp}.exp-card:first-child{animation:.5s 50ms both fadeUp}.exp-card:nth-child(2){animation:.5s .12s both fadeUp}.edu-card:first-child{animation:.5s 80ms both fadeUp}.edu-card:nth-child(2){animation:.5s .15s both fadeUp}@media (max-width:700px){.shell{grid-template-columns:1fr}aside{display:none}.edu-card{grid-template-columns:1fr;gap:.3rem}}.edu-tag{letter-spacing:.1em;text-transform:uppercase;border-radius:3px;margin-top:8px;padding:3px 5px;font-family:DM Mono,monospace;font-size:9px;display:inline-block}.tag-dropped{background:var(--surface2);color:var(--amber)}.toplist-ranked li{counter-increment:rank;align-items:center;gap:14px;display:flex}.toplist-ranked{counter-reset:rank}.toplist-ranked li:before{content:counter(rank);color:var(--muted);text-align:right;min-width:16px;font-family:DM Mono,monospace;font-size:11px}.toplist-ranked li img{object-fit:cover;border-radius:4px;flex-shrink:0;width:42px;height:62px}.toplist-toggle{text-align:center;width:100%;display:block}.poster-grid{flex-wrap:wrap;justify-content:center;gap:1.5rem;padding:1rem 0;display:flex}.poster-item{flex-direction:column;align-items:center;width:120px;display:flex}.poster-item img{object-fit:cover;border-radius:6px;width:120px;height:180px}.poster-item p{text-align:center;margin-top:8px;font-size:12px;line-height:1.4}.game-grid{justify-content:center;gap:1.5rem;padding:1rem 0}.game-item{flex-direction:column;align-items:center;width:180px;display:flex}.page-header{flex-direction:column;gap:6px;margin-bottom:2.5rem;display:flex}.page-title{font-family:var(--ff-mono);letter-spacing:-.02em;color:var(--accent);font-size:clamp(1rem,4vw,2rem);font-weight:500;line-height:1}.page-title:before{content:"> ";color:var(--green);font-weight:500}.page-sub{font-family:var(--ff-mono);color:var(--muted);letter-spacing:.08em;padding-left:1.1rem;font-size:.72rem}.posterhover:hover img{transform:scale(1.07)}#rain-canvas{pointer-events:none;z-index:999;opacity:0;width:100%;height:100%;transition:opacity .8s;position:fixed;top:0;left:0}#dragon-grid{pointer-events:none;z-index:999;opacity:.15;position:fixed;top:0;left:0}.outlink{font-family:var(--ff-mono);color:var(--accent);font-size:.78rem;text-decoration:none}.outlink:hover{text-decoration:underline}a{font-family:var(--ff-mono);color:var(--muted);border-radius:4px;align-items:center;gap:6px;padding:.3rem .6rem;font-size:.78rem;text-decoration:none;transition:color .15s,background .15s;display:flex}.rabbit-svg path{fill:gray;transition:fill .3s}.rabbit-svg:hover path{fill:#7f77dd}.scene{font-family:var(--font-sans);flex-direction:column;justify-content:center;align-items:center;gap:1rem;padding:2rem 1rem;display:flex}.toggle-wrap{cursor:pointer;-webkit-tap-highlight-color:transparent;width:50px;height:25px;position:relative}.track{border-radius:12.5px;width:50px;height:25px;transition:background .5s;position:absolute;inset:0;overflow:hidden}.track.day{background:#87ceeb}.track.night{background:#1a1a3e}.stars{opacity:0;transition:opacity .4s;position:absolute;inset:0}.night .stars{opacity:1}.star{background:#fff;border-radius:50%;animation:2s infinite twinkle;position:absolute}.star:first-child{width:2px;height:2px;animation-delay:0s;top:4px;left:6px}.star:nth-child(2){width:1px;height:1px;animation-delay:.4s;top:10px;left:14px}.star:nth-child(3){width:1px;height:1px;animation-delay:.8s;top:5px;left:22px}.star:nth-child(4){width:2px;height:2px;animation-delay:1.2s;top:14px;left:10px}.star:nth-child(5){width:1px;height:1px;animation-delay:.2s;top:8px;left:30px}@keyframes twinkle{0%,to{opacity:1}50%{opacity:.3}}.knob{z-index:2;border-radius:50%;justify-content:center;align-items:center;width:19px;height:19px;transition:left .45s cubic-bezier(.4,0,.2,1),box-shadow .4s;display:flex;position:absolute;top:3px}.knob.night{background:radial-gradient(circle at 35% 35%,#e8e8ff,#c8c8f8);left:3px;box-shadow:0 0 0 2px #b4b4ff2e,0 0 7px 4px #8c8cff59,0 0 14px 6px #6464dc2e}.knob.day{background:radial-gradient(circle at 40% 40%,#fff8c5,gold);left:28px;box-shadow:0 0 0 3px #ffdc0040,0 0 8px 4px #ffc80073,0 0 16px 6px #ffa00033}.sun-rays{opacity:0;pointer-events:none;transition:opacity .3s .15s;position:absolute;inset:-7px}.knob.day .sun-rays{opacity:1}.ray{transform-origin:50% 16px;background:#ffdc00e6;border-radius:1px;width:1.5px;height:4px;margin-left:-.75px;position:absolute;left:50%}.moon-crater{background:#8c8cc866;border-radius:50%;transition:opacity .3s;position:absolute}.knob.day .moon-crater{opacity:0}.knob.night .moon-crater{opacity:1}.label{letter-spacing:.03em;-webkit-user-select:none;user-select:none;font-size:13px;font-weight:500;transition:color .4s}.label.day-label{color:#b8860b}.label.night-label{color:#9090d0}.state-label{color:var(--color-text-secondary);letter-spacing:.05em;text-transform:uppercase;font-size:11px}.row{align-items:center;gap:12px;display:flex}.copy-block{background:var(--color-background-secondary);border:.5px solid var(--color-border-tertiary);border-radius:var(--border-radius-lg);width:100%;max-width:420px;padding:1rem 1.25rem}.copy-block p{color:var(--color-text-secondary);margin:0 0 8px;font-size:13px}.copy-block code{font-family:var(--font-mono);color:var(--color-text-primary);white-space:nowrap;font-size:12px;display:block;overflow-x:auto}.copy-btn{border-radius:var(--border-radius-md);cursor:pointer;border:.5px solid var(--color-border-secondary);color:var(--color-text-secondary);background:0 0;margin-top:10px;padding:4px 10px;font-size:12px}.copy-btn:hover{background:var(--color-background-secondary)}.Hitchhiker{text-align:center;width:100%;max-width:480px;display:none}.matrix-hidden{color:green;font-family:var(--ff-mono);letter-spacing:.08em;padding-left:1.1rem;font-size:.72rem;display:none}.dot{border-radius:50%;width:6px;height:6px;animation:2s infinite pulse;display:inline-block}.dot--available{background:var(--green)}.dot--busy{background:red}.overlay{z-index:100;background:#0009;justify-content:center;align-items:center;display:none;position:fixed;inset:0}button{font-family:var(--ff-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);background:#1a56db12;border:1px solid #1a56db33;border-radius:3px;padding:2px 8px;font-size:.65rem}button:hover{border:1px solid #1a57db}.hidden{display:none}
\ No newline at end of file
diff --git a/tailwind.sh b/tailwind.sh
index 10c301c..0ddff22 100755
--- a/tailwind.sh
+++ b/tailwind.sh
@@ -18,4 +18,5 @@ exec "./$BIN" --input  static/input.css \
   --config tailwind.config.js \
   --content "./static/**/*.html" \
   --output static/output.css \
+  --minify \
   --watch
\ No newline at end of file