:root {
  color-scheme: dark;
  font: 100%/1.55 system-ui, sans-serif;
  background: #0b111b;
  color: #eaf2fc;
}
main { width: min(50rem, calc(100% - 2.5rem)); margin: 4rem auto; }
.brand { font-weight: 700; letter-spacing: .18em; font-size: .76rem; }
.brand span { color: #64e6cc; }
h1 { font-size: clamp(2.2rem, 7vw, 3.7rem); line-height: 1.05; margin: .55em 0 .25em; }
p { color: #b5c9df; }
form, section { margin-top: 1.5rem; padding: 1.25rem; background: #131e2c; border: 1px solid #30445a; border-radius: 1rem; }
label { display: block; font-weight: 650; margin-bottom: .5rem; }
.login { display: flex; flex-wrap: wrap; gap: .75rem; }
input { flex: 1 1 12rem; min-width: 0; border: 1px solid #526c85; background: #0b111b; color: #eaf2fc; }
button { background: #64e6cc; color: #091f20; border: 0; font-weight: 750; cursor: pointer; }
button:disabled { opacity: .6; cursor: wait; }
input, button { font: inherit; padding: .6rem .9rem; border-radius: .5rem; }
:focus-visible { outline: 2px solid #8ae9ff; outline-offset: 3px; }
dl { display: grid; grid-template-columns: minmax(6rem, 1fr) minmax(0, 2fr); gap: .25rem 1rem; }
dt { color: #b5c9df; }
dd { margin: 0; overflow-wrap: anywhere; }
h2 { margin: 0 0 .55rem; font-size: 1.15rem; }