: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 { position: relative; overflow: hidden; background: linear-gradient(135deg, #102f59 0%, #24598d 52%, #4b91c7 100%); color: white; padding: 3.4rem max(1.25rem, calc((100% - 1100px) / 2)); }
header::after { content: ""; position: absolute; width: 18rem; height: 18rem; right: -5rem; top: -9rem; border-radius: 50%; background: rgba(255,255,255,.12); box-shadow: -7rem 9rem 0 -2rem rgba(255,255,255,.08); }
header h1 { position: relative; z-index: 1; margin: 0 0 .6rem; color: #fff; font-size: clamp(2.1rem, 5vw, 3.4rem); font-weight: 800; letter-spacing: .08em; line-height: 1.2; text-shadow: 0 3px 12px rgba(5, 24, 49, .3); }
header p { position: relative; z-index: 1; margin: 0; color: rgba(255,255,255,.92); font-size: 1.05rem; letter-spacing: .16em; }
main { max-width: 1100px; margin: 2rem auto; padding: 0 1.25rem 3rem; }
.page-layout { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.toc { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; padding: 1rem; background: rgba(255,255,255,.88); border: 1px solid #dfe7f1; border-radius: .7rem; box-shadow: 0 6px 20px rgba(31, 55, 84, .06); }
.toc h2 { margin: 0 0 .65rem; color: #183d68; font-size: 1.05rem; }
.toc ul { margin: 0; padding: 0; list-style: none; }
.toc li { margin: .2rem 0; line-height: 1.4; }
.toc li.level-3 { padding-left: .8rem; font-size: .9rem; }
.toc a { display: block; color: #45627f; text-decoration: none; padding: .25rem .35rem; border-radius: .3rem; }
.toc a:hover { color: #1d5c9b; background: #edf4fb; }
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; }
@media (max-width: 900px) { .page-layout { display: block; } .toc { position: static; max-height: none; margin-bottom: 1rem; } }