1:root {
 2  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
 3  line-height: 1.5;
 4  font-weight: 400;
 5
 6  color-scheme: light dark;
 7  color: rgba(255, 255, 255, 0.87);
 8  background-color: #242424;
 9
10  font-synthesis: none;
11  text-rendering: optimizeLegibility;
12  -webkit-font-smoothing: antialiased;
13  -moz-osx-font-smoothing: grayscale;
14}
15
16a {
17  font-weight: 500;
18  color: #646cff;
19  text-decoration: inherit;
20}
21a:hover {
22  color: #535bf2;
23}
24
25body {
26  margin: 0;
27  display: flex;
28  place-items: center;
29  min-width: 320px;
30  min-height: 100vh;
31}
32
33h1 {
34  font-size: 3.2em;
35  line-height: 1.1;
36}
37
38.card {
39  padding: 2em;
40}
41
42#app {
43  max-width: 1280px;
44  margin: 0 auto;
45  padding: 2rem;
46  text-align: center;
47}
48
49button {
50  border-radius: 8px;
51  border: 1px solid transparent;
52  padding: 0.6em 1.2em;
53  font-size: 1em;
54  font-weight: 500;
55  font-family: inherit;
56  background-color: #1a1a1a;
57  cursor: pointer;
58  transition: border-color 0.25s;
59}
60button:hover {
61  border-color: #646cff;
62}
63button:focus,
64button:focus-visible {
65  outline: 4px auto -webkit-focus-ring-color;
66}
67
68@media (prefers-color-scheme: light) {
69  :root {
70    color: #213547;
71    background-color: #ffffff;
72  }
73  a:hover {
74    color: #747bff;
75  }
76  button {
77    background-color: #f9f9f9;
78  }
79}