:root { font: 1rem/1.55 system-ui, sans-serif; color: #172823; background: #f4f8f4; }
* { box-sizing: border-box; }
body { margin: 0; }
header { padding: 1.4rem max(1.25rem, calc((100vw - 64rem) / 2)); font-weight: 750; }
main { width: min(100% - 2.5rem, 28rem); margin: clamp(2rem, 10vh, 7rem) auto; }
h1 { font-size: clamp(2rem, 7vw, 3rem); line-height: 1.08; margin: 0 0 1rem; }
p { overflow-wrap: anywhere; }
form { display: grid; gap: .65rem; margin: 1.75rem 0 .75rem; }
input, button { font: inherit; min-height: 3rem; border-radius: .75rem; padding: .6rem .9rem; }
input { width: 100%; border: 1px solid #647b72; background: white; }
button { background: #17513d; color: white; border: 1px solid transparent; font-weight: 650; cursor: pointer; }
button:disabled { background: #d9e3dd; color: #4c6257; cursor: default; }
.secondary { color: #174e3c; background: transparent; padding-inline: 0; text-align: left; }
.secondary:disabled { background: transparent; }
#status { min-height: 1.5rem; color: #882c1d; }
.passkey-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
#passkey-list { margin-bottom: 1rem; }