app.css

:root {
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;

  color-scheme: light dark;
  color: #213547;
  background-color: #ffffff;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  --theme-primary: #3c73ec;
  --theme-inactive-border: #bec2ca;
  --theme-control-bg: #f9f9f9;
  --theme-hover-border: #959aa3;
  --theme-hover-bg: #f3f3f3;
  --theme-box-bg: #dce6fc;
  --theme-box-border: #9db4e6;
  --theme-opacity-disabled: 0.7;
  --theme-accent-dark: #5c028c;
  --theme-accent: #8b24c3;
  --theme-accent-light: #cd74fd;
}

a {
  font-weight: 500;
  color: #286fda;
  text-decoration: inherit;
}
a:hover {
  color: #0d4d8c;
}

body {
  margin: 0;
}

h1 {
  font-size: 3.2em;
  line-height: 1.1;
}

.card {
  padding: 2em;
}

#app {
  display: flex;
  width: 100%;
}

button {
  color: inherit;
  border-radius: 8px;
  border: 2px solid var(--theme-inactive-border);
  padding: 0.2em 0.6em;
  font-size: 1em;
  font-family: inherit;
  background-color: var(--theme-control-bg);
}
button:not([disabled]):hover {
  border-color: var(--theme-hover-border);
  background-color: var(--theme-hover-bg);
}
button:not([disabled]):active {
  background-color: var(--theme-active-bg);
}
button:not([disabled]):focus,
button:not([disabled]):focus-visible {
  outline: none;
  border-color: var(--theme-primary);
}
button[disabled] {
  opacity: 0.5;
}

input[type="text"] {
  border: 2px solid var(--theme-inactive-border);
  font-size: 1em;
}
input[type="text"]:focus,
input[type="text"]:focus-visible {
  outline: none;
  border: 2px solid var(--theme-primary);
}
input[type="text"]:disabled {
  opacity: var(--theme-opacity-disabled);
}

input[type="file"] {
  font-size: 1em;
  font-family: inherit;
}

p {
  margin: 0.75em 0;
}

@media (prefers-color-scheme: dark) {
  :root {
    color: rgba(255, 255, 255, 0.87);
    background-color: #242424;

    --theme-primary: #6e92e1;
    --theme-inactive-border: #6a6a6a;
    --theme-hover-bg: #383838;
    --theme-box-bg: #222a3c;
    --theme-box-border: #646e84;

    --theme-accent-dark: #a738e3;
    --theme-accent: #cd74fd;
    --theme-accent-light: #e0a6ff;
  }
  a {
    color: #64a3ff;
  }
  a:hover {
    color: #2b85e2;
  }
  button {
    background-color: #1a1a1a;
  }
}