:root { color-scheme: light; font-family: system-ui, sans-serif; color: #202020; background: #f3f4f5; line-height: 1.65; }
* { box-sizing: border-box; }
body { margin: 0; }
header, main, footer { max-width: 960px; margin: auto; padding: 24px; }
header { border-bottom: 1px solid #ccc; }
h1 { font-size: clamp(1.5rem, 4vw, 2.1rem); line-height: 1.25; }
h2 { font-size: 1.2rem; line-height: 1.4; }
a { color: #204e93; text-underline-offset: 3px; }
button, select { font: inherit; min-height: 44px; padding: 8px 12px; border: 1px solid #929292; border-radius: 7px; background: white; color: #202020; }
button { cursor: pointer; }
button:hover { background: #eee; }
button:disabled { opacity: .55; cursor: wait; }
:focus-visible { outline: 3px solid #245ba2; outline-offset: 3px; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.feedback-card { background: white; border: 1px solid #ccc; border-radius: 10px; padding: 20px; margin: 18px 0; overflow-wrap: anywhere; }
.muted { color: #585858; font-size: .9rem; }
.preserve-lines { white-space: pre-wrap; }
li { margin: 10px 0; }
[hidden] { display: none !important; }
footer { border-top: 1px solid #ccc; }

.page-brand { display: inline-flex; align-items: center; gap: 10px; color: #193f59; font-size: 20px; font-weight: 750; text-decoration: none; }
.page-brand .brand-mark { display: block; width: 32px; height: 32px; flex-shrink: 0; }