use favicon, and add screenshot

Author: hate

README.md

@@ -1,9 +1,11 @@
 <div align="center">
 
-# <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" style="display: inline-block; vertical-align: middle; margin-right: 8px;"><rect x="2" y="6" width="20" height="12" rx="2" /><text x="12" y="15" text-anchor="middle" font-size="10" fill="currentColor" dominant-baseline="middle">D</text></svg> devkeys
+# <img src="apps/web/public/favicon.svg" width="24" height="24" alt="D" /> devkeys
 
 **Type faster. Code smarter.**
 
+![devkeys interface](screenshots/interface.png)
+
 A privacy-first typing trainer built for developers who want to sharpen their coding muscle memory.
 
 Born from the need to master a new split keyboard layout while practicing real code—not random text.

apps/web/src/app/App.styles.ts

@@ -1,7 +1,7 @@
 import { uiTokens } from "../shared/styles/tokens";
 
 export const appStyles = {
-  root: "flex h-screen max-h-screen flex-col items-center justify-center overflow-hidden px-6 py-12 text-neutral-100",
+  root: "flex h-screen max-h-screen flex-col items-center justify-center overflow-hidden px-6 pt-12 pb-24 text-neutral-100",
   frameRegion: "relative flex w-full max-w-5xl flex-col items-center gap-6 max-h-full",
   main: "relative w-full max-w-5xl max-h-full",
   glow: "pointer-events-none absolute inset-0 -z-10 rounded-[32px] bg-gradient-radial from-blue-500/5 via-transparent to-transparent blur-3xl",