updated lighthouse/ tweaked UI

assets/styling/base.css

@@ -1,11 +1,16 @@
 #header-container {
   position: sticky;
-  top: 0;
+  top: 10px;
   z-index: 40;
   background: rgba(255, 255, 255, 0.8);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+  width: 50%;
+  border-radius: 30px;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 10px;
 }
 
 html.dark #header-container {
@@ -645,6 +650,7 @@ aside#toc {
   padding-left: 10px;
   height: fit-content;
   max-height: calc(100vh - var(--header-height) - 40px);
+  padding-bottom: 10px;
   overflow-y: auto;
   position: sticky;
   top: calc(var(--header-height) + 40px);
@@ -713,12 +719,22 @@ html.dark aside#toc li a:hover {
   flex: 1;
   min-width: 0;
   max-width: 720px;
+  padding: 20px;
+  margin-top: 40px;
+  background: rgba(255, 255, 255, 0.8);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border-radius: 12px;
   width: 100%;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
 }
 
+html.dark #main-wrap {
+  background: rgba(0, 0, 0, 0.4);
+}
+
 main.prose {
   min-width: 0;
   max-width: 100%;
@@ -1221,7 +1237,7 @@ html.dark .mt-menu .mt-item.on {
 }
 
 #sidebar {
-  margin-top: 0;
+  margin-top: 40px;
   background: rgba(255, 255, 255, 0.8);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
@@ -1230,8 +1246,9 @@ html.dark .mt-menu .mt-item.on {
   flex-shrink: 0;
   padding-top: 20px;
   position: sticky;
-  top: var(--header-height);
-  max-height: calc(100vh - var(--header-height));
+  height: fit-content;
+  top: calc(var(--header-height) + 40px);
+  max-height: calc(100vh - var(--header-height) - 40px);
   overflow-y: auto;
 }
 
@@ -1574,6 +1591,11 @@ html.dark .search-footer {
     display: none;
   }
 
+  #header-container {
+    width: 90%;
+    border-radius: 20px;
+  }
+
   #navbar .tabs,
   #theme-toggle,
   #navbar .nav-top::after {

assets/styling/roots.css

@@ -39,6 +39,23 @@ body {
     overflow-x: hidden;
 }
 
+body::before {
+    content: "";
+    position: fixed;
+    inset: 0;
+    pointer-events: none;
+    z-index: -1;
+    background: radial-gradient(ellipse at center,
+            transparent 35%,
+            rgba(255, 255, 255, 0.7) 100%);
+}
+
+html.dark body::before {
+    background: radial-gradient(ellipse at center,
+            transparent 35%,
+            rgba(0, 0, 0, 0.7) 100%);
+}
+
 html.dark body {
     background: var(--bg-dark);
     color: var(--text-dark);
@@ -46,12 +63,11 @@ html.dark body {
 
 .video-bg {
     position: fixed;
-    top: 0;
-    left: 0;
+    inset: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
-    z-index: -1;
+    z-index: -2;
 }
 
 a {