* {
  box-sizing: border-box;
  margin: 0;
}

:root {
  color-scheme: light dark;

  --primary-bg: light-dark(#eee, #191925);
  --secondary-bg: light-dark(#ddd, #223);
  --tertiary-bg: light-dark(#ccc, #334);

  --primary-fg: light-dark(#111, #eee);
  --secondary-fg: light-dark(#223, #ddd);

  --accent-bg: #287;
  --accent-fg: light-dark(#000, #fff);
  --error-fg: light-dark(#b01, #f45);
}

body {
  background: var(--primary-bg);
  color: var(--primary-fg);

  line-height: 1.5;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

input,
button,
textarea,
select {
  font: inherit;
}

input,
textarea,
select {
  background: var(--primary-bg);
  border: 1px solid var(--tertiary-bg);
  padding: 2px;
}

textarea,
code {
  font-family: "Cascadia Code", "Cascadia Mono", "Fira Code", "Fira Mono", "Noto Mono", monospace;
}

textarea {
  height: 15em;
  resize: vertical;
}

button,
input[type="submit"],
::file-selector-button {
  border: 1px solid var(--accent-bg);
  background: color-mix(in oklab, var(--accent-bg), transparent 80%);
  color: var(--accent-fg);

  &:hover {
    background: color-mix(in oklab, var(--accent-bg), transparent 70%);
  }

  &:active {
    background: color-mix(in oklab, var(--accent-bg), transparent 90%);
  }

  &:disabled {
    background: color-mix(in oklab, var(--accent-bg), transparent 80%);
    border-color: color-mix(in oklab, var(--accent-bg), transparent 90%);
    color: color-mix(in oklab, var(--accent-fg), transparent 50%);
  }
}

progress {
  width: 100%;
  appearance: none;
  background: var(--tertiary-bg);
  border: none;
}

::-webkit-progress-bar {
  background: var(--tertiary-bg);
}

::-moz-progress-bar {
  background: var(--accent-bg);
}

::-webkit-progress-value {
  background: var(--accent-bg);
}

details {
  border: 1px solid var(--tertiary-bg);
}

summary {
  padding-inline-start: 1ch;
  background: var(--tertiary-bg);
  cursor: pointer;
}

form {
  display: flex;
  flex-direction: column;
  gap: 0.5ch;
  border: none;
  border-top: 1px solid var(--tertiary-bg);
  padding-block: 0.35em 0.625em;
  padding-inline: 0.75em;
}

form>label {
  display: flex;
  flex-direction: column;
}

form>input[type="submit"] {
  margin-top: 1ch;
}

dialog[open] {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: none;
  background: var(--primary-bg);
}

::backdrop {
  background: black;
  opacity: 0.8;
}