:root { color-scheme: light; --blue: #2149CD; --night: #0C1642; --ink: #0B0B12; --paper: #F4F3F1; --grey: #6E6E76; --line: #DEDDE3; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.6 'Red Hat Text', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
.bar { background: var(--blue); color: #fff; }
.bar a { color: #fff; text-decoration: none; font: 700 17px 'Red Hat Display', system-ui, sans-serif; letter-spacing: -.01em; }
.bar span { display: block; font-size: 12px; opacity: .8; font-weight: 400; }
.bar .in, main, footer { max-width: 760px; margin: 0 auto; padding-left: 20px; padding-right: 20px; }
.bar .in { padding-top: 16px; padding-bottom: 16px; }
main { background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--blue); border-radius: 10px; padding: 28px; margin-top: 24px; margin-bottom: 24px; max-width: 720px; }
h1 { font: 700 32px/1.15 'Red Hat Display', system-ui, sans-serif; letter-spacing: -.02em; margin: 0 0 6px; text-wrap: balance; }
h2 { font: 700 19px/1.3 'Red Hat Display', system-ui, sans-serif; margin: 28px 0 8px; color: var(--blue); }
p, li { color: #2A2A33; }
p { margin: 0 0 10px; }
ul { margin: 0 0 10px; padding-left: 20px; }
.date { color: var(--grey); font-size: 14px; }
a { color: var(--blue); }
a:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
footer { padding-bottom: 32px; font-size: 13px; color: var(--grey); display: flex; flex-wrap: wrap; gap: 6px 20px; }
footer a { color: var(--grey); }
@media (max-width: 520px) { main { padding: 20px; margin-left: 12px; margin-right: 12px; } h1 { font-size: 26px; } }