feat: add header

src/styles/index.css

@@ -5,15 +5,42 @@
 @theme {
 }
 
+:root {
+  --safe-area-height: var(--tg-viewport-stable-height, 100dvh);
+  --safe-area-width: var(--tg-viewport-width, 100dvw);
+
+  --safe-area-top: var(--tg-viewport-safe-area-inset-top, 0px);
+  --safe-content-top: var(--tg-viewport-content-safe-area-inset-top, 0px);
+  --safe-top: calc(var(--safe-area-top) + var(--safe-content-top));
+
+  --safe-area-right: var(--tg-viewport-safe-area-inset-right, 0px);
+  --safe-content-right: var(--tg-viewport-content-safe-area-inset-right, 0px);
+  --safe-right: calc(var(--safe-area-right) + var(--safe-content-right));
+
+  --safe-area-bottom: var(--tg-viewport-safe-area-inset-bottom, 0px);
+  --safe-content-bottom: var(--tg-viewport-content-safe-area-inset-bottom, 0px);
+  --safe-bottom: calc(var(--safe-area-bottom) + var(--safe-content-bottom));
+
+  --safe-area-left: var(--tg-viewport-safe-area-inset-left, 0px);
+  --safe-content-left: var(--tg-viewport-content-safe-area-inset-left, 0px);
+  --safe-left: calc(var(--safe-area-left) + var(--safe-content-left));
+}
+
 html,
 body {
-  @apply w-dvw h-dvh bg-top-left bg-green-300;
+  background: #9ebf3e;
+  height: var(--safe-area-height);
+  width: var(--safe-area-width);
   font-family: "BalsamiqSans", sans-serif;
 }
 
 #root {
-  @apply w-full h-full max-w-150 m-auto overflow-hidden relative;
+  width: 100%;
+  height: 100%;
+  max-width: 600px;
+  margin: auto;
   overflow: hidden;
+  position: relative;
 }
 
 button {