:root { color-scheme: light; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color: #24324a; background: #f5f7fb; }
body { margin: 0; line-height: 1.75; }
header { background: linear-gradient(135deg, #193b68, #3578b8); color: white; padding: 2.5rem max(1.25rem, calc((100% - 1100px) / 2)); }
header h1 { margin: 0 0 .4rem; font-size: clamp(1.8rem, 4vw, 2.6rem); }
header p { margin: 0; opacity: .88; }
main { max-width: 1100px; margin: 2rem auto; padding: 0 1.25rem 3rem; }
nav { display: flex; flex-wrap: wrap; gap: .65rem; margin-bottom: 1.5rem; }
nav a { color: #1d5c9b; text-decoration: none; background: white; border: 1px solid #d9e2ef; border-radius: .55rem; padding: .45rem .75rem; }
article { background: white; border: 1px solid #e3e9f2; border-radius: .8rem; padding: clamp(1.25rem, 3vw, 2.5rem); box-shadow: 0 8px 30px rgba(31, 55, 84, .06); }
h1, h2, h3, h4 { color: #183d68; line-height: 1.3; }
h1 { font-size: 2rem; } h2 { margin-top: 2rem; } h3 { margin-top: 1.6rem; }
img { display: block; max-width: 100%; height: auto; margin: 1rem auto; border-radius: .45rem; }
pre { overflow-x: auto; background: #172033; color: #eaf1ff; padding: 1rem; border-radius: .55rem; }
code { background: #eef3f8; border-radius: .25rem; padding: .12rem .3rem; }
pre code { background: transparent; padding: 0; }
blockquote { margin: 1rem 0; padding: .6rem 1rem; border-left: 4px solid #74a7d4; background: #f2f7fc; color: #50647d; }
li { margin: .25rem 0; } a { color: #1d5c9b; }
footer { max-width: 1100px; margin: 0 auto; padding: 0 1.25rem 2rem; color: #6b7b90; font-size: .9rem; }