:root { color-scheme: light dark; font: 16px/1.65 system-ui, sans-serif; }
body { margin: 0; background: light-dark(#f6f5f2, #191919); color: light-dark(#242424, #ececec); }
main { max-width: 520px; margin: 8vh auto; padding: 32px; }
.brand, footer { font-size: 14px; }
h1 { font-size: 28px; margin: 28px 0 12px; }
h2 { font-size: 18px; }
a { color: inherit; }
p { color: light-dark(#606060, #bababa); }
section { margin: 24px 0; }
input { display: block; box-sizing: border-box; width: 100%; padding: 12px; margin: 8px 0 16px; border: 1px solid #8886; border-radius: 6px; font: inherit; }
button { padding: 10px 18px; border: 1px solid #8886; border-radius: 6px; background: light-dark(#272727, #eee); color: light-dark(white, #222); font: inherit; cursor: pointer; }
button.secondary { background: transparent; color: inherit; }
button:disabled { opacity: .5; cursor: wait; }
.actions { display: flex; gap: 12px; }
article { border-bottom: 1px solid #8884; padding: 18px 0; }
footer { margin-top: 40px; }
#message { color: light-dark(#a12d21, #ffa99c); }
:focus-visible { outline: 3px solid #548ad4; outline-offset: 3px; }