:root { color-scheme: light dark; font: 17px/1.5 system-ui, sans-serif; --ink: #151515; --paper: #fff; --field: #fafafa; --muted: #555; --line: #aaa; --link: #005bbb; }
@media (prefers-color-scheme: dark) { :root { --ink: #f4f4f4; --paper: #141414; --field: #222; --muted: #c1c1c1; --line: #777; --link: #80bdff; } }
* { box-sizing: border-box; }
body { color: var(--ink); background: var(--paper); max-width: 40rem; margin: 0 auto; padding: 2rem 1.5rem 3rem; }
h1 { line-height: 1.15; margin: 2rem 0 1rem; font-size: 2rem; }
a { color: var(--link); text-underline-offset: .2em; }
a:focus-visible { outline: 3px solid var(--link); outline-offset: 5px; }
form { margin-top: 2rem; }
label { display: block; font-weight: 600; margin: 1.4rem 0 .5rem; }
.privacy { font-size: .875rem; color: var(--muted); }
.optional { font-weight: 400; color: var(--muted); }
input, textarea { display: block; width: 100%; font: inherit; color: inherit; background: var(--field); border: 1px solid var(--line); border-radius: .7rem; padding: .75rem; }
textarea { resize: vertical; min-height: 10rem; }
input:focus-visible, textarea:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }
button { width: 100%; border: 0; border-radius: 999px; margin-top: 1.2rem; padding: 1rem; color: var(--paper); background: var(--ink); font: 600 1rem system-ui, sans-serif; cursor: pointer; }
button:disabled { opacity: .5; cursor: wait; }
button:focus-visible { outline: 3px solid var(--link); outline-offset: 4px; }
.bot-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
#message-status:empty { display: none; }
#message-status { margin-top: 2rem; font-weight: 600; }
footer { margin-top: 3rem; font-size: .875rem; }
@media (max-width: 360px) { body { padding: 1.5rem 1rem 2rem; } }