:root { color-scheme: light; --ink: #15304a; --muted: #557086; --blue: #1769aa; --sky: #eaf5ff; --gold: #e4a72c; --line: #c9dceb; --paper: #fff; --bg: #edf4f8; font-family: "Segoe UI", sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: linear-gradient(135deg, #eaf4fb, #f8fbfd); line-height: 1.6; }
.layout { display: flex; min-height: 100vh; }
aside { width: 250px; flex: 0 0 250px; padding: 24px 18px; background: #102a43; color: white; }
aside img { display: block; width: 72px; height: 72px; margin-bottom: 12px; }
aside h2 { margin: 0 0 18px; font-size: 1.05rem; }
aside a { display: block; padding: 8px 10px; color: #eaf5ff; border-radius: 8px; text-decoration: none; }
aside a:hover, aside a:focus { background: #1f5277; }
main { width: min(100%, 1050px); padding: 42px clamp(22px, 5vw, 72px); }
.hero, .card { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 16px 42px #15304a18; padding: clamp(22px, 4vw, 44px); }
.hero { background: linear-gradient(135deg, #fff, var(--sky)); }
h1 { margin: 0 0 12px; font-size: clamp(2rem, 5vw, 3.6rem); line-height: 1.05; }
h2 { margin-top: 1.8em; color: var(--blue); }
h3 { color: var(--blue); }
a { color: var(--blue); }
.button { display: inline-block; margin: 8px 8px 0 0; padding: 10px 16px; border-radius: 9px; background: var(--blue); color: white; text-decoration: none; font-weight: 650; }
.button.secondary { background: var(--gold); color: #2c2410; }
code, pre { font-family: Consolas, monospace; }
code { padding: 2px 5px; border-radius: 4px; background: #e9f1f6; }
pre { overflow-x: auto; padding: 14px; border-radius: 10px; background: #102a43; color: #eaf5ff; }
table { width: 100%; border-collapse: collapse; margin: 16px 0; }
th, td { padding: 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { background: var(--sky); }
footer { margin-top: 28px; color: var(--muted); font-size: .92rem; }
@media (max-width: 760px) { .layout { display: block; } aside { width: auto; } aside nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; } main { padding: 22px 14px; } }