:root { color-scheme: light; font-family: system-ui, sans-serif; background: #f4f7fa; color: #17212b; }
* { box-sizing: border-box; }
body { margin: 0; }
header { background: #17324d; padding: 1rem max(1rem, calc((100% - 720px) / 2)); }
header a { color: white; font-weight: 700; text-decoration: none; }
main { max-width: 720px; margin: 0 auto; padding: 1.25rem; }
.intro { display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.panel, article, .identity-warning { background: white; border: 1px solid #d9e0e7; border-radius: 12px; padding: 1.25rem; }
.narrow { max-width: 560px; margin: 2rem auto; }
.timeline { display: grid; gap: 1rem; margin-top: 1rem; }
article h2 { margin: .35rem 0; }
time { color: #586879; font-size: .85rem; }
label { display: grid; gap: .4rem; margin: 1rem 0; font-weight: 650; }
input, textarea { width: 100%; font: inherit; padding: .7rem; border: 1px solid #9aabbc; border-radius: 7px; }
button { border: 0; border-radius: 8px; background: #1769aa; color: white; padding: .75rem 1rem; font: inherit; font-weight: 700; cursor: pointer; }
button:disabled { background: #84909b; cursor: not-allowed; }
.error { color: #a61b1b; }
.success { color: #176b32; }
.identity-warning { border-left: 5px solid #d49b20; font-size: .92rem; }
.unread { font-weight: 700; }
article p { white-space: pre-wrap; }