initial commit, boilerplate stuff

src/index.css

@@ -0,0 +1,81 @@
+:root {
+  font-family: "Saira", sans-serif;
+  font-optical-sizing: auto;
+  font-weight: 400;
+  font-style: normal;
+  line-height: 1.5;
+
+  color-scheme: light dark;
+
+  --color-text: #f9fafb;
+  --color-bg: #111827;
+  --color-link: #646cff;
+  --color-link-hover: #535bf2;
+  --color-surface: #1f2937;
+  --color-border: transparent;
+  --color-accent: #7c83ff;
+  --color-accent-hover: #4a50e0;
+  --color-option-bg: #37366e;
+  --color-option-border: #111827;
+  --color-notice-bg: #a02b2b;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    --color-text: #213547;
+    --color-bg: #ffffff;
+    --color-link-hover: #747bff;
+    --color-surface: #f9f9f9;
+    --color-option-bg: #f5f5f5;
+    --color-option-border: #cccccc;
+    --color-border: #646cff;
+  }
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  display: grid;
+  place-items: center;
+  min-height: 100vh;
+  background-color: var(--color-bg);
+  color: var(--color-text);
+}
+
+a {
+  font-weight: 500;
+  color: var(--color-link);
+  text-decoration: inherit;
+}
+a:hover {
+  color: var(--color-link-hover);
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid var(--color-border);
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: var(--color-surface);
+  cursor: pointer;
+  transition: border-color 0.25s, background-color 0.2s;
+}
+button:hover {
+  border-color: var(--color-accent);
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}