:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  color: #17202a;
  background: #f4f7fb;
}

* {
  box-sizing: border-box;
}

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

main {
  width: min(42rem, calc(100% - 2rem));
  padding: 2.5rem;
  border: 1px solid #dbe3ed;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 1rem 3rem rgb(23 32 42 / 8%);
}

.eyebrow {
  margin: 0;
  color: #6b4eff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

h1 {
  margin: 0.4rem 0 0.75rem;
}

p {
  line-height: 1.6;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.75rem 0;
}

button {
  padding: 0.75rem 1rem;
  border: 1px solid #b8c4d4;
  border-radius: 0.5rem;
  color: inherit;
  background: #fff;
  cursor: pointer;
  font: inherit;
  font-weight: 650;
}

button.primary {
  border-color: #6b4eff;
  color: #fff;
  background: #6b4eff;
}

button:disabled {
  cursor: wait;
  opacity: 0.6;
}

.result {
  display: grid;
  gap: 0.35rem;
  padding: 1rem;
  border-left: 0.3rem solid #8290a3;
  border-radius: 0.35rem;
  background: #f4f7fb;
}

.result.clear {
  border-color: #16875d;
  background: #e9f8f1;
}

.result.detected {
  border-color: #d33f49;
  background: #fff0f1;
}

.result.warning {
  border-color: #c47b00;
  background: #fff7e6;
}

.result.error {
  border-color: #d33f49;
  background: #fff0f1;
}

details {
  margin-top: 1.25rem;
}

summary {
  cursor: pointer;
  font-weight: 650;
}

pre {
  overflow-x: auto;
  padding: 1rem;
  border-radius: 0.5rem;
  background: #17202a;
  color: #eaf0f6;
}