:root {
  font-family: system-ui, sans-serif;
  color-scheme: light dark;
}
* { box-sizing: border-box; }
body { margin: 0; }
main {
  max-width: 52rem;
  margin: 0 auto;
  padding: 2rem;
}
header { padding-bottom: 1.25rem; border-bottom: 1px solid color-mix(in srgb, CanvasText 14%, transparent); }
h1 { margin: .15rem 0 .5rem; }
h2 { margin-top: 0; }
.eyebrow { margin: 0; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.muted { color: color-mix(in srgb, CanvasText 68%, transparent); }
section { padding: 1.5rem 0; border-bottom: 1px solid color-mix(in srgb, CanvasText 12%, transparent); }
form {
  display: grid;
  gap: 0.75rem;
  margin: 1.25rem 0 0;
}
input, button {
  font: inherit;
  padding: 0.65rem 0.75rem;
}
button { width: max-content; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid Highlight; outline-offset: 2px; }
dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.5rem 1rem;
}
dt { font-weight: 600; }
dd { margin: 0; overflow-wrap: anywhere; }
#save-result { min-height: 1.5em; }
.checkbox-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.checkbox-row input {
  width: auto;
  margin: 0;
}
.diagnostics { padding: .85rem 1rem; border-radius: .6rem; background: color-mix(in srgb, CanvasText 5%, Canvas); }
@media (max-width: 600px) { main { padding: 1rem; } dl { grid-template-columns: 1fr; } }