@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');
:root { color-scheme: light; --ink: #1c1d1f; --muted: #6a6e77; --line: #e2e6ec; --accent: #346ddb; --paper: #fff; --soft: #f4f5f7; font-family: 'DM Sans', sans-serif; color: var(--ink); background: var(--paper); }
* { box-sizing: border-box; }
body { margin: 0; }
a { color: var(--accent); }
.topbar { height: 109px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; background: #ffffffeb; backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 3; }
.header-main, .header-bottom { width: 100%; display: flex; align-items: center; padding: 0 32px; }
.header-main { height: 64px; border-bottom: 1px solid var(--line); gap: 20px; }
.header-bottom { height: 45px; }
.brand { font-weight: 700; text-decoration: none; color: var(--ink); white-space: nowrap; font-size: 17px; }
.brand span { font-weight: 500; margin-left: 8px; }
.topbar svg, .sidebar svg { width: 16px; height: 16px; flex: none; stroke-width: 1.8; }
.menu-button svg { width: 20px; height: 20px; }
.search-box svg { color: var(--muted); }
.search-box { display: flex; align-items: center; width: min(360px, 35vw); margin-left: auto; height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--muted); gap: 9px; }
.search-box:focus-within { border-color: var(--accent); }
.search-box input { border: 0; outline: 0; font: inherit; font-size: 13px; color: var(--ink); width: 100%; min-width: 0; background: none; }
.products { display: flex; align-self: stretch; gap: 12px; }
.product-link { display: inline-flex; align-items: center; gap: 7px; padding: 0 10px; font-size: 13px; text-decoration: none; color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap; }
.product-link:hover, .product-link.active { color: var(--ink); }
.product-link.active { font-weight: 600; border-bottom-color: var(--accent); }
.mobile-products { display: none; }
.language-label { margin-left: auto; display: flex; align-items: center; font-size: 13px; }
select { border: 0; background: transparent; color: var(--ink); font: inherit; padding: 8px 4px; border-radius: 4px; cursor: pointer; }
.layout { display: grid; grid-template-columns: 320px minmax(0, 1fr) 240px; min-height: calc(100vh - 109px); }
.sidebar { border-right: 1px solid var(--line); padding: 18px 16px 48px 32px; overflow-y: auto; height: calc(100vh - 109px); position: sticky; top: 109px; }
.nav-group { margin: 0 0 4px; }
.nav-group[hidden], .nav-link[hidden] { display: none; }
.nav-group summary { display: flex; justify-content: space-between; align-items: center; padding: 10px 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; line-height: 1.4; cursor: pointer; list-style: none; }
.nav-group summary::-webkit-details-marker { display: none; }
.nav-group summary::after { content: '⌄'; color: var(--muted); font-size: 16px; transition: transform .15s; }
.nav-group:not([open]) summary::after { transform: rotate(-90deg); }
.nav-items { margin: 0 0 8px 8px; }
.nav-heading { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--muted); padding: 22px 12px 7px; }
.nav-link { display: flex; align-items: center; gap: 10px; color: var(--muted); text-decoration: none; font-size: 14px; padding: 8px 12px; border-radius: 5px; line-height: 1.5; }
.nav-link.nested { padding-left: 27px; }
.nav-link svg { color: #9da0a4; }
.nav-link:hover { background: var(--soft); color: var(--ink); }
.nav-link.active { color: var(--accent); font-weight: 600; }
.nav-link.active svg { color: var(--accent); }
main { min-width: 0; width: 100%; max-width: 860px; margin: 0 auto; padding: 32px clamp(24px, 4vw, 56px) 80px; }
.breadcrumbs { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); margin: 0 0 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.breadcrumbs a { color: var(--muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--accent); }
.content { line-height: 1.65; font-size: 16px; }
.content h1, .content h2, .content h3 { line-height: 1.25; color: var(--ink); scroll-margin-top: 138px; }
.content h1 { font-size: 36px; font-weight: 700; margin: 0 0 12px; }
.page-heading { margin-bottom: 24px; }
.page-description { font-size: 18px; line-height: 1.55; color: var(--muted); margin: 0; }
.content h2 { font-size: 30px; font-weight: 600; margin: 48px 0 16px; }
.content h3 { font-size: 19px; margin-top: 30px; }
.content p, .content ul, .content ol { margin: 0 0 18px; }
.content li { margin-bottom: 7px; }
.content img { max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: 6px; display: block; margin: 25px auto; }
.content img[data-size="line"] { display: inline-block; vertical-align: -0.25em; width: auto; max-width: 100%; height: 1.35em; border: 0; border-radius: 0; margin: 0 0.15em; object-fit: contain; }
.content figure { margin: 24px 0; }
.content figure img { margin: 0 auto; }
.content figcaption { color: var(--muted); text-align: center; font-size: 13px; margin-top: 8px; }
.content table { border-collapse: collapse; display: block; overflow-x: auto; margin: 24px 0; max-width: 100%; }
.content td, .content th { text-align: left; padding: 10px 13px; border-bottom: 1px solid var(--line); vertical-align: top; }
.content th { background: var(--soft); }
.content pre { overflow-x: auto; background: #163238; color: white; padding: 18px; border-radius: 4px; }
.content :not(pre) > code { background: var(--soft); border-radius: 3px; padding: 2px 5px; font-size: .9em; }
.gb-hint { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; border-radius: 6px; padding: 16px; margin: 20px 0; background: #eef5ff; color: var(--ink); font-size: 14px; line-height: 1.45; }
.gb-hint-icon { color: #346ddb; display: flex; align-items: flex-start; padding-top: 1px; }
.gb-hint-icon svg { width: 18px; height: 18px; flex: none; stroke-width: 1.8; }
.gb-hint-content { min-width: 0; }
.gb-hint-content > :first-child { margin-top: 0; }
.gb-hint-content > :last-child { margin-bottom: 0; }
.gb-warning { background: #fff5ec; }
.gb-warning .gb-hint-icon { color: #e48824; }
.gb-danger { background: #fff0ee; }
.gb-danger .gb-hint-icon { color: #d44a45; }
.gb-success { background: #edf8f0; }
.gb-success .gb-hint-icon { color: #2b9855; }
.gb-columns { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; margin: 24px 0; }
.gb-column { border-top: 2px solid var(--line); padding-top: 12px; }
.gb-stepper { counter-reset: step; margin: 24px 0 32px; }
.gb-step { counter-increment: step; position: relative; padding: 0 0 20px 61px; }
.gb-step:last-child { padding-bottom: 0; }
.gb-step::before { content: counter(step); position: absolute; left: 0; top: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; width: 29px; height: 29px; background: #346ddb; color: #fff; font-size: 14px; font-weight: 500; line-height: 26px; font-variant-numeric: tabular-nums; }
.gb-step:not(:last-child)::after { content: ''; position: absolute; left: 14px; top: 36px; bottom: 8px; width: 1px; background: #a9c4f4; }
.gb-step > :first-child { margin-top: 0; }
.gb-step > h4:first-child { font-size: 17px; line-height: 1.4; margin: -2px 0 16px; }
.missing-asset { display: block; padding: 20px; border: 1px dashed var(--line); color: var(--muted); font-size: 13px; }
.content table[data-view="cards"] { display: grid; border: 0; }
.content table[data-view="cards"] thead { display: none; }
.content table[data-view="cards"] tbody { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.content table[data-view="cards"] tr { display: flex; flex-direction: column; position: relative; border: 1px solid var(--line); border-radius: 6px; padding: 16px; transition: border-color .15s, box-shadow .15s; }
.content table[data-view="cards"] tr:hover { border-color: #b4c4df; box-shadow: 0 3px 12px #172b4d0d; }
.content table[data-view="cards"] td { border: 0; padding: 0; }
.content table[data-view="cards"] td:first-child { font-weight: 700; }
.content table[data-view="cards"] td:last-child { color: var(--muted); font-size: 13px; margin-top: 6px; }
.content table[data-view="cards"] td:last-child a { color: var(--muted); text-decoration: none; }
.content table[data-view="cards"] td:last-child a::after { content: ''; position: absolute; inset: 0; }
.outline { padding: 40px 24px 40px 16px; position: sticky; top: 109px; height: calc(100vh - 109px); overflow-y: auto; font-size: 12px; }
.outline div { color: var(--muted); font-weight: 700; margin-bottom: 14px; }
.outline a { display: block; color: var(--muted); text-decoration: none; padding: 5px 0; line-height: 1.4; }
.outline a.h3 { padding-left: 12px; }
.outline a:hover { color: var(--accent); }
.pagination { border-top: 1px solid var(--line); margin-top: 65px; padding-top: 24px; display: flex; justify-content: space-between; gap: 18px; }
.pagination a { text-decoration: none; font-size: 13px; font-weight: 700; }
.menu-button { display: none; background: none; border: 0; padding: 4px; color: var(--ink); cursor: pointer; }
@media (max-width: 1250px) { .layout { grid-template-columns: 320px minmax(0,1fr); } .outline { display: none; } }
@media (max-width: 700px) { .topbar { height: 108px; } .header-main, .header-bottom { padding: 0 16px; } .header-main { height: 60px; gap: 10px; } .header-bottom { height: 48px; } .brand { font-size: 14px; } .brand span { display: none; } .search-box { width: auto; flex: 1; margin-left: auto; } .products { display: none; } .mobile-products { display: block; min-width: 0; max-width: 120px; font-size: 12px; } .language-label select { max-width: 115px; font-size: 12px; } .menu-button { display: block; } .layout { display: block; } .sidebar { position: fixed; top: 108px; bottom: 0; left: 0; height: auto; width: min(320px, 85vw); z-index: 2; background: white; box-shadow: 10px 10px 35px #102e3420; transform: translateX(-110%); transition: transform .2s ease; } .sidebar.open { transform: none; } main { padding: 32px 20px 60px; } .content h1 { font-size: 32px; } .content h2 { font-size: 25px; } .page-description { font-size: 16px; } .gb-columns { grid-template-columns: 1fr; } }