:root { color-scheme: light; --surface: #f4f6f8; --panel: #fff; --text: #17202a; --muted: #52606d; --action: #165d8f; --focus: #ffbf47; --danger: #9b1c1c; --success: #176b45; --border: #aab4be; --space: clamp(1rem, 3vw, 2rem); font-family: system-ui, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--surface); color: var(--text); line-height: 1.55; }
main { min-height: 100vh; display: grid; place-items: center; padding: var(--space); }
section { width: min(100%, 36rem); padding: clamp(1.25rem, 5vw, 3rem); background: var(--panel); border: 1px solid var(--border); border-radius: .75rem; }
.eyebrow { color: var(--muted); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
h1 { margin-block: .25rem .75rem; font-size: clamp(2rem, 8vw, 3.5rem); line-height: 1.05; }
form { display: grid; gap: .75rem; margin-block: 2rem 1rem; }
label { font-weight: 700; }
.help { margin: -.5rem 0 0; color: var(--muted); }
input, button { min-height: 3rem; border-radius: .4rem; font: inherit; }
input { width: 100%; padding: .65rem .75rem; border: 1px solid var(--border); }
button { padding: .65rem 1rem; border: 0; background: var(--action); color: #fff; font-weight: 700; cursor: pointer; }
button:disabled { cursor: wait; opacity: .65; }
:focus-visible { outline: .25rem solid var(--focus); outline-offset: .2rem; }
#status { min-height: 1.6em; font-weight: 700; }
#status[data-state="error"] { color: var(--danger); }
#status[data-state="success"] { color: var(--success); }
@media (max-width: 30rem) { main { place-items: start center; } section { border-radius: .5rem; } button { width: 100%; } }
@media (prefers-reduced-motion: no-preference) { input, button { transition: border-color 120ms ease, opacity 120ms ease; } }