Update styles.scss

src/styles.scss

@@ -403,13 +403,17 @@ canvas {
   padding: clamp(1rem, 4vw, 2rem);
 }
 
+app-root {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
 .app-surface {
+  flex-grow: 1;
   background: var(--app-bg);
   color: var(--app-fg);
   transition: background-color 220ms ease, color 220ms ease;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
 }
 
 .foot {
@@ -417,7 +421,7 @@ canvas {
   padding: clamp(1rem, 2vw, 1.5rem);
   text-align: center;
   opacity: .8;
-  margin-top: auto;
+  background: var(--app-bg);
 }
 
 /* ---- Topbar ---- */
@@ -426,7 +430,7 @@ canvas {
   top: 0;
   z-index: 100;
   backdrop-filter: saturate(1.1) blur(8px);
-  background: color-mix(in srgb, var(--app-topbar-bg) 65%, transparent);
+  background: color-mix(in srgb, var(--card-bg) 80%, transparent);
   border-bottom: 1px solid rgba(0, 0, 0, .08);
   display: flex;
   align-items: center;
@@ -439,8 +443,6 @@ canvas {
   gap: clamp(0.4rem, 1vw, 0.6rem);
   color: inherit;
   text-decoration: none;
-  flex: 1;
-  /* push nav to center */
 }
 
 .topbar .brand .logo-dot {
@@ -456,6 +458,9 @@ canvas {
 }
 
 .topbar .nav {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
   display: flex;
   gap: clamp(0.25rem, 1vw, 0.5rem);
   justify-content: center;
@@ -529,6 +534,8 @@ canvas {
 .imprint {
   display: grid;
   gap: clamp(1rem, 3vw, 1.5rem);
+  max-width: 1200px;
+  margin: 0 auto;
 }
 
 .hero {