:root { color-scheme: light; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color: #1e293b; background: #f5f7fb; }
* { box-sizing: border-box; }
body { margin: 0; line-height: 1.65; }
a { color: #0f766e; text-underline-offset: 3px; overflow-wrap: anywhere; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px max(24px, calc((100vw - 1320px) / 2)); background: #0f172a; }
.site-header a { color: #fff; text-decoration: none; }
.brand { font-size: 20px; font-weight: 750; letter-spacing: .04em; }
.brand span { color: #94a3b8; margin-left: 12px; font-size: 15px; font-weight: 400; letter-spacing: normal; }
.download { font-size: 14px; border: 1px solid #475569; padding: 8px 12px; border-radius: 8px; }
.layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 36px; max-width: 1320px; margin: 36px auto; padding: 0 24px; }
aside { align-self: start; position: sticky; top: 24px; font-size: 14px; }
aside h2 { font-size: 18px; margin-top: 0; }
aside code { white-space: normal; overflow-wrap: anywhere; }
main { background: #fff; padding: 32px 42px; border: 1px solid #e2e8f0; border-radius: 14px; min-width: 0; }
h1, h2, h3 { line-height: 1.3; color: #0f172a; }
h1 { font-size: 30px; margin-top: 0; }
main h2 { margin-top: 42px; padding-top: 22px; border-top: 1px solid #e2e8f0; font-size: 24px; }
h3 { margin-top: 28px; font-size: 19px; }
p, li { overflow-wrap: anywhere; }
pre { overflow-x: auto; padding: 18px; border-radius: 8px; background: #0f172a; color: #e2e8f0; font-size: 13px; line-height: 1.6; }
code { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: .9em; }
:not(pre) > code { padding: 2px 5px; background: #eef2f6; border-radius: 4px; }
table { display: block; overflow-x: auto; border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { padding: 10px 13px; border: 1px solid #e2e8f0; text-align: left; vertical-align: top; }
th { background: #f1f5f9; }
blockquote { border-left: 3px solid #0f766e; padding-left: 18px; margin-left: 0; color: #475569; }
@media (max-width: 850px) {
    .layout { grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 20px; padding: 0 14px; }
    aside { position: static; }
    main { padding: 22px 18px; }
    .site-header { padding: 18px; flex-wrap: wrap; }
    h1 { font-size: 25px; }
}
