:root {
  color-scheme: dark;
  font-family: ui-sans-serif, system-ui, sans-serif;
  background: #08110f;
  color: #ecf8f3;
}

body { margin: 0; min-height: 100vh; display: grid; place-items: center; }
main { width: min(34rem, calc(100% - 3rem)); }
.eyebrow { color: #63d6ad; font-size: .75rem; letter-spacing: .16em; }
h1 { font-size: clamp(2.5rem, 8vw, 5rem); margin: .3rem 0 1rem; }
section { display: grid; gap: 1rem; margin-top: 2rem; }
label { display: grid; gap: .4rem; color: #a7bbb4; }
input, button { border-radius: .7rem; border: 1px solid #315149; padding: .85rem 1rem; font: inherit; }
input { background: #101d19; color: inherit; }
button { background: #63d6ad; color: #06100d; font-weight: 700; cursor: pointer; }
pre { white-space: pre-wrap; padding: 1rem; border: 1px solid #315149; border-radius: .7rem; background: #101d19; }
[hidden] { display: none !important; }
