:root { color-scheme: light; font-family: system-ui, sans-serif; color: #17202a; background: #eef2f5; }
* { box-sizing: border-box; }
body { margin: 0; }
.page { max-width: 760px; margin: 0 auto; padding: 48px 20px; }
.eyebrow { margin: 0 0 8px; color: #227c9d; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; }
h1 { margin: 0; font-size: clamp(2.3rem, 8vw, 4rem); }
h2 { margin-top: 0; }
.intro { color: #52616b; font-size: 1.1rem; }
.card, .message { background: white; border-radius: 14px; padding: 22px; box-shadow: 0 8px 24px #17202a12; }
.card { margin: 30px 0 40px; }
label { display: block; margin: 14px 0 6px; font-weight: 650; }
input, textarea { width: 100%; border: 1px solid #b8c4cc; border-radius: 8px; padding: 11px; font: inherit; }
button { margin-top: 16px; border: 0; border-radius: 8px; padding: 12px 18px; color: white; background: #227c9d; font: inherit; font-weight: 700; cursor: pointer; }
.status { min-height: 1.4em; color: #52616b; }
.messages-heading { display: flex; justify-content: space-between; align-items: baseline; }
.messages-heading span, time { color: #71808a; font-size: .9rem; }
.messages { display: grid; gap: 14px; }
.message h3 { margin: 0 0 3px; }
.message p { white-space: pre-wrap; overflow-wrap: anywhere; }
.message time { display: block; margin-bottom: 12px; }
.empty { color: #71808a; }