:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #07100e;
  color: #edf8f3;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 2rem; }
main { width: min(46rem, 100%); }
.marca { color: #7de2b8; font-size: .75rem; font-weight: 800; letter-spacing: .18em; }
h1 { margin: .5rem 0 1rem; font-size: clamp(2.1rem, 7vw, 4.5rem); line-height: .98; letter-spacing: -.05em; }
.introducao, .nota { color: #b7c9c1; line-height: 1.65; }
section, form { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid #254239; }
h2 { font-size: 1rem; }
ol { display: grid; gap: 1rem; padding-left: 1.25rem; color: #d5e4de; }
.botao, button { display: inline-block; border: 0; border-radius: .35rem; padding: .8rem 1rem; background: #7de2b8; color: #07100e; font: inherit; font-weight: 800; text-decoration: none; cursor: pointer; }
label { display: block; margin-bottom: .6rem; font-weight: 700; }
.linha { display: flex; gap: .65rem; }
input { min-width: 0; flex: 1; border: 1px solid #42645a; border-radius: .35rem; padding: .8rem; background: #0c1915; color: inherit; font: inherit; }
input:focus { outline: 2px solid #7de2b8; outline-offset: 2px; }
#resultado { min-height: 1.5rem; color: #a8f0d0; }
code { color: #a8f0d0; }
@media (max-width: 38rem) { .linha { flex-direction: column; } button { width: 100%; } }