* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #f5f6fa; color: #20263a; font-family: system-ui, sans-serif; line-height: 1.8; }
main { max-width: 820px; margin: auto; padding: max(28px, env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) max(40px, env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-left)); }
nav { display: flex; gap: 18px; flex-wrap: wrap; padding: 18px 0; }
a { color: #4138a5; overflow-wrap: anywhere; text-underline-offset: 3px; }
a:focus-visible { outline: 3px solid #7b70e8; outline-offset: 4px; }
.brand { font-weight: 800; text-decoration: none; }
article { background: white; border: 1px solid #e1e4ed; border-radius: 18px; margin: 24px 0; padding: clamp(20px, 4vw, 36px); scroll-margin-top: 16px; }
h1 { font-size: 1.8rem; line-height: 1.4; }
h2 { font-size: 1.2rem; margin-top: 30px; }
li + li { margin-top: 8px; }
footer { padding: 24px 0; color: #596275; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }