better desgin

static/vars.css

@@ -1,10 +1,6 @@
 @import "tailwindcss";
 
-@custom-variant dark (&:where(.dark, .dark *));
-@theme {
-  --color-regal-blue: #243c5a; 
-}
-
+@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
 @import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Libre+Caslon+Display&family=Libre+Caslon+Text:ital,wght@0,400;0,700;1,400&family=Noto+Sans+JP:wght@100..900&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
 
@@ -57,4 +53,42 @@
   font-optical-sizing: auto;
   font-weight: 400;
   font-style: normal;
-}
+}
+
+.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);
+  transition:color 0.15s,background 0.15s;
+  display:flex;align-items:center;gap:6px;
+}
+.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);}