:root {
  --bg: #f7f8fb; --surface: #fff; --sidebar: #101827; --sidebar-muted: #9aa8be;
  --text: #1b2433; --muted: #667085; --line: #e6e9ef; --accent: #7564e8;
  --accent-soft: #eeecff; --info: #edf5ff; --info-border: #6ea7e8;
  --warning: #fff4d6; --warning-border: #efbd43;
  --danger: #fff0ef; --danger-border: #e16c65; --success: #ecf9f1; --success-border: #55b981;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: "DM Sans", sans-serif; line-height: 1.7; }
button, input { font: inherit; }
.app-shell { display: flex; min-height: 100vh; }
.sidebar { background: var(--sidebar); color: white; width: 286px; flex: 0 0 286px; padding: 27px 18px 20px; display: flex; flex-direction: column; min-height: 100vh; }
.brand { display: flex; align-items: center; gap: 12px; color: white; text-decoration: none; padding: 0 10px 29px; }
.brand-banner { width: 100%; height: 72px; object-fit: contain; border-radius: 9px; display: block; box-shadow: 0 7px 20px #0004; }
.brand strong, .brand small { display: block; line-height: 1.25; } .brand strong { font: 600 15px "Space Grotesk"; } .brand small { color: var(--sidebar-muted); font-size: 11px; margin-top: 3px; }
.sidebar-search { position: relative; margin: 0 4px 23px; color: var(--sidebar-muted); }
.sidebar-search svg { position: absolute; width: 16px; height: 16px; top: 12px; left: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.sidebar-search input { width: 100%; color: white; background: #1b2639; border: 1px solid #293650; border-radius: 8px; padding: 9px 43px 9px 35px; outline: 0; font-size: 13px; }
.sidebar-search input:focus { border-color: #887bff; box-shadow: 0 0 0 3px #7564e833; } .sidebar-search kbd { position: absolute; right: 9px; top: 9px; border: 1px solid #40506a; border-radius: 4px; padding: 0 4px; font-size: 10px; }
#navigation { overflow: auto; } .nav-group { margin: 0 0 12px; } .nav-toggle { width: 100%; display: flex; justify-content: space-between; align-items: center; color: #7889a4; background: transparent; border: 0; text-align: left; text-transform: uppercase; letter-spacing: .1em; font-size: 10px; font-weight: 700; padding: 7px 11px 6px; cursor: pointer; } .nav-toggle:hover { color: white; } .nav-toggle:disabled { cursor: default; } .nav-chevron { font-size: 15px; line-height: 10px; transition: transform .2s ease; } .nav-group.collapsed .nav-chevron { transform: rotate(-90deg); } .nav-children { overflow: hidden; max-height: 1200px; opacity: 1; transition: max-height .25s ease, opacity .2s ease; } .nav-group.collapsed .nav-children { max-height: 0; opacity: 0; }
.nav-item { display: block; color: #c4cede; text-decoration: none; font-size: 13px; padding: 6px 11px; border-radius: 6px; margin: 1px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-item:hover { color: white; background: #1c2940; } .nav-item.active { color: white; background: #3a326c; font-weight: 600; } .nav-item.sub { padding-left: 22px; color: #93a2b9; font-size: 12px; }
.sidebar-footer { color: #687993; font-size: 11px; line-height: 1.5; border-top: 1px solid #263249; padding: 15px 10px 0; margin-top: auto; }
.main { flex: 1; min-width: 0; } .topbar { height: 72px; border-bottom: 1px solid var(--line); display: flex; align-items: center; padding: 0 5.2%; gap: 18px; background: var(--surface); }
.breadcrumbs { color: var(--muted); font-size: 13px; flex: 1; } .breadcrumbs strong { color: var(--text); font-weight: 600; } .breadcrumbs span { margin: 0 8px; color: #adb5c2; }
.topbar-actions { display: flex; align-items: center; gap: 17px; } .top-link { color: var(--muted); font-size: 13px; text-decoration: none; } .top-link:hover { color: var(--accent); }
.icon-button { background: transparent; border: 0; color: var(--muted); cursor: pointer; font-size: 18px; padding: 5px; } .icon-button:hover { color: var(--accent); } .menu-button { display: none; }
.content-layout { display: flex; max-width: 1230px; margin: 0 auto; padding: 65px 5.2% 80px; gap: 70px; } .article { min-width: 0; max-width: 760px; flex: 1; }
.article h1, .article h2, .article h3 { font-family: "Space Grotesk", sans-serif; color: var(--text); line-height: 1.25; letter-spacing: -.025em; scroll-margin-top: 95px; }
.article h1 { font-size: clamp(32px, 4vw, 46px); margin: 0 0 25px; } .article h2 { font-size: 26px; margin: 43px 0 14px; } .article h3 { font-size: 18px; margin: 30px 0 8px; }
.article p { margin: 0 0 19px; } .article a { color: var(--accent); font-weight: 600; text-decoration: none; } .article a:hover { text-decoration: underline; }
.article strong { font-weight: 700; } .article ul, .article ol { padding-left: 25px; margin: 10px 0 22px; } .article li { padding-left: 4px; margin: 5px 0; }
.inline-mark { font-weight: 600; } .inline-mark.green { color: #198754; } .inline-mark.orange { color: #c27600; } .inline-mark.red { color: #d14343; }
.doc-ref { display: inline-block; }
.article blockquote { border-left: 3px solid var(--accent); background: var(--accent-soft); padding: 14px 18px; margin: 22px 0; border-radius: 0 8px 8px 0; }
.callout { border: 1px solid; border-left-width: 4px; border-radius: 9px; padding: 15px 18px; margin: 24px 0; } .callout p:last-child { margin-bottom: 0; }
.callout.danger { background: var(--danger); border-color: var(--danger-border); } .callout.info { background: var(--info); border-color: var(--info-border); } .callout.success { background: var(--success); border-color: var(--success-border); } .callout.warning { background: var(--warning); border-color: var(--warning-border); }
.callout-label { display: block; text-transform: uppercase; font-size: 10px; letter-spacing: .09em; font-weight: 700; margin-bottom: 4px; }
.article figure { margin: 28px 0; } .article figure img { width: auto; max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: 9px; display: block; } .article figcaption { color: var(--muted); font-size: 12px; margin-top: 7px; }
.article code { background: #eef0f5; color: #6149bd; padding: 2px 6px; border-radius: 4px; font-size: .9em; } .article hr { border: 0; border-top: 1px solid var(--line); margin: 35px 0; }
.article pre { max-width: 100%; overflow-x: auto; }
.toc { width: 180px; flex: 0 0 180px; border-left: 1px solid var(--line); padding-left: 20px; align-self: flex-start; position: sticky; top: 34px; } .toc-title { color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 9px; } .toc a { display: block; color: var(--muted); font-size: 12px; line-height: 1.4; padding: 4px 0; text-decoration: none; } .toc a:hover { color: var(--accent); }
.article-nav { display: flex; justify-content: space-between; gap: 14px; border-top: 1px solid var(--line); margin-top: 60px; padding-top: 24px; } .article-nav a { border: 1px solid var(--line); border-radius: 8px; color: var(--muted); padding: 10px 14px; font-size: 12px; font-weight: 500; } .article-nav a:last-child { text-align: right; margin-left: auto; }
.search-results { position: fixed; z-index: 20; left: 304px; top: 76px; width: min(520px, calc(100vw - 325px)); max-height: 70vh; overflow: auto; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 15px 40px #10182726; border-radius: 10px; padding: 8px; } .search-result { padding: 10px 12px; display: block; text-decoration: none; border-radius: 6px; } .search-result:hover { background: var(--accent-soft); } .search-result strong { display: block; color: var(--text); font-size: 13px; } .search-result small { color: var(--muted); font-size: 11px; }
.loading { display: flex; gap: 7px; padding: 20px 0; } .loading span { width: 8px; height: 8px; background: var(--accent); border-radius: 50%; animation: pulse 1s infinite alternate; } .loading span:nth-child(2) { animation-delay: .2s; } .loading span:nth-child(3) { animation-delay: .4s; } @keyframes pulse { to { opacity: .2; transform: translateY(-4px); } }
.mobile-footer { display: none; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
body.dark { --bg: #000; --surface: #0b0b0b; --sidebar: #050505; --text: #f2f2f2; --muted: #a6a6a6; --line: #292929; --accent-soft: #171717; --info: #111; --info-border: #4b8ac4; --warning: #211b0d; --danger: #241313; --success: #102217; }
body.dark .sidebar-search input { background: #111; border-color: #292929; }
body.dark .nav-item:hover { background: #171717; }
body.dark .nav-item.active { background: #242424; }
body.dark .sidebar-footer { border-color: #292929; }
body.dark .article code { background: #171717; } body.dark .search-results { box-shadow: 0 15px 40px #000; }
body.dark .inline-mark.green { color: #55d99a; } body.dark .inline-mark.orange { color: #f0b44d; } body.dark .inline-mark.red { color: #ff7770; }
@media (max-width: 900px) {
  .sidebar { width: 250px; flex-basis: 250px; }
  .content-layout { gap: 30px; }
  .toc { display: none; }
}
@media (max-width: 680px) {
  body { overflow-x: hidden; }
  .sidebar { position: fixed; z-index: 30; inset: 0 auto 0 -290px; width: min(286px, 86vw); flex-basis: auto; overflow-y: auto; transition: left .25s ease; }
  .sidebar.open { left: 0; box-shadow: 12px 0 30px #0006; }
  .app-shell:has(.sidebar.open)::before { content: ""; position: fixed; z-index: 20; inset: 0; background: #0008; }
  .brand { padding-bottom: 22px; }
  .menu-button { display: block; flex: 0 0 auto; }
  .topbar { height: 62px; padding: 0 14px; gap: 10px; }
  .breadcrumbs { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
  .topbar-actions { gap: 8px; }
  .content-layout { display: block; padding: 34px 18px 48px; }
  .article { width: 100%; max-width: none; overflow-wrap: anywhere; }
  .article h1 { font-size: clamp(28px, 9vw, 38px); margin-bottom: 20px; }
  .article h2 { font-size: 23px; margin-top: 34px; }
  .article h3 { font-size: 17px; }
  .article p { margin-bottom: 16px; }
  .article ul, .article ol { padding-left: 22px; }
  .article figure { margin: 22px 0; overflow-x: auto; }
  .article figure img { max-width: none; }
  .article figcaption { max-width: 100%; }
  .callout { padding: 13px 14px; margin: 20px 0; }
  .article-nav { flex-direction: column; gap: 10px; margin-top: 42px; }
  .article-nav a, .article-nav a:last-child { width: 100%; margin-left: 0; text-align: left; }
  .top-link { display: none; }
  .mobile-footer { display: block; padding: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
  .search-results { left: 14px; top: 68px; width: calc(100vw - 28px); max-height: 65vh; }
}
@media (max-width: 380px) {
  .content-layout { padding-left: 14px; padding-right: 14px; }
  .topbar { padding-left: 10px; padding-right: 10px; }
}