:root { color-scheme: light dark; font-family: system-ui, sans-serif; line-height: 1.55; }
body { margin: 0; }
main { box-sizing: border-box; width: min(100%, 36rem); margin-inline: auto; padding: clamp(1rem, 4vw, 2rem); }
h1 { line-height: 1.2; }
form { display: grid; gap: 1rem; margin-block: 1.5rem 1rem; }
[hidden] { display: none !important; }
label { display: grid; gap: .35rem; }
input, button { box-sizing: border-box; font: inherit; }
input:not([type=checkbox]), button { width: 100%; min-height: 3rem; padding: .55rem .75rem; border: 1px solid GrayText; border-radius: .55rem; }
.confirm { display: flex; align-items: baseline; gap: .55rem; }
.social { display: grid; gap: .75rem; margin-block: .75rem; }
button { cursor: pointer; }
button:disabled { cursor: default; }
#status { min-height: 1.55rem; overflow-wrap: anywhere; }
nav { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
nav a { display: inline-flex; align-items: center; min-height: 44px; }