:root {
  color-scheme: dark;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: #090d12;
  color: #e7f7ef;
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
}

main {
  width: min(42rem, calc(100% - 2rem));
  padding: 2rem;
  border: 1px solid #2b5d4a;
  background: #0e1718;
  box-shadow: 0 1rem 4rem #0008;
}

.eyebrow {
  color: #71e6af;
  letter-spacing: 0.15em;
}

.controls {
  display: flex;
  gap: 0.75rem;
  margin: 1.5rem 0;
}

button {
  padding: 0.7rem 1rem;
  border: 1px solid #71e6af;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

button:disabled {
  opacity: 0.45;
  cursor: default;
}

.status[data-state="error"] {
  color: #ff8c8c;
}

.status[data-state="ready"] {
  color: #71e6af;
}

.partial {
  min-height: 1.5rem;
  color: #a7c9bb;
}

textarea {
  box-sizing: border-box;
  width: 100%;
  resize: vertical;
  border: 1px solid #315448;
  padding: 0.75rem;
  background: #080d0e;
  color: inherit;
}