feat: add example

examples/demo-frontend/src/app/globals.css

@@ -0,0 +1,85 @@
+:root {
+  --color-paper: #f3efe4;
+  --color-surface: #faf7ef;
+  --color-surface-strong: #e6e0d4;
+  --color-ink: #191918;
+  --color-ink-muted: #65615a;
+  --color-ink-faint: #67635c;
+  --color-line: #d7d0c3;
+  --color-line-strong: #aaa297;
+  --color-blue: #2847f4;
+  --color-acid: #c9ff50;
+  --color-acid-dark: #6f9c00;
+  --color-orange: #ff8a3d;
+  --color-error: #b83228;
+  --color-focus: #8dacff;
+  --font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --font-display: 'Arial Black', 'Helvetica Neue', Arial, sans-serif;
+  --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
+  --shadow-card: 0 10px 40px rgb(37 31 22 / 7%);
+  --shadow-card-hover: 0 20px 55px rgb(37 31 22 / 14%);
+}
+
+html {
+  color: var(--color-ink);
+  background: var(--color-paper);
+  scroll-behavior: smooth;
+  height: 100%;
+}
+
+html,
+body {
+  max-width: 100vw;
+  overflow-x: hidden;
+}
+
+body {
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: var(--color-ink);
+  background:
+    radial-gradient(circle at 15% 0%, rgb(255 255 255 / 58%), transparent 25%),
+    var(--color-paper);
+  font-family: var(--font-body);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+button,
+input,
+select,
+textarea {
+  font: inherit;
+}
+
+::selection {
+  color: var(--color-ink);
+  background: var(--color-acid);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+
+  *,
+  *::before,
+  *::after {
+    scroll-behavior: auto !important;
+    transition-duration: 0.01ms !important;
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+  }
+}