:root {
    --brand: #ff5a0a;
    --brand-dark: #d64200;
    --ink: #172033;
    --muted: #667085;
    --line: #e6e9ef;
    --panel: #f7f8fb;
    --soft: #fff4ee;
}
* { scroll-margin-top: 1.5rem; }
html { scroll-behavior: smooth; }
body { color: var(--ink); background: #ffffff; }
a { color: var(--brand-dark); }
a:hover { color: var(--brand); }
.skip-link { position: fixed; left: 1rem; top: 1rem; z-index: 60; transform: translateY(-150%); border-radius: .5rem; background: var(--ink); color: #fff; padding: .65rem .9rem; font-weight: 700; }
.skip-link:focus { transform: translateY(0); outline: 3px solid var(--brand); }
.mobile-topbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; height: 64px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.92); padding: 0 1rem; backdrop-filter: blur(12px); }
.brand-mini, .brand { display: inline-flex; align-items: center; gap: .75rem; color: var(--ink); text-decoration: none; }
.brand-logo { display: block; width: 2rem; height: 2rem; border-radius: .45rem; flex: none; }
.brand strong { display: block; line-height: 1.05; }
.brand small { display: block; color: var(--muted); font-size: .78rem; margin-top: .1rem; }
.mobile-menu-button { display: inline-flex; flex-direction: column; justify-content: center; gap: 4px; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: .55rem; background: #fff; padding: 0 .7rem; }
.mobile-menu-button span:not(.sr-only) { display: block; height: 2px; background: var(--ink); border-radius: 99px; }
.site-shell { min-height: 100vh; }
.site-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 50; width: min(84vw, 21rem); transform: translateX(-105%); border-right: 1px solid var(--line); background: #fff; transition: transform .2s ease; }
.sidebar-open .site-sidebar { transform: translateX(0); }
.sidebar-overlay { position: fixed; inset: 0; z-index: 45; display: none; background: rgba(15,23,42,.42); }
.sidebar-open .sidebar-overlay { display: block; }
.sidebar-inner { display: flex; height: 100%; flex-direction: column; gap: 1.25rem; overflow-y: auto; padding: 1.25rem; }
.search-label { position: absolute; width: 1px; height: 1px; clip: rect(0 0 0 0); overflow: hidden; white-space: nowrap; }
.search-box { display: flex; align-items: center; gap: .5rem; border: 1px solid var(--line); border-radius: .65rem; background: var(--panel); padding: .55rem .7rem; }
.search-box svg { width: 1rem; height: 1rem; fill: #98a2b3; flex: none; }
.search-box input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: .92rem; }
.sidebar-nav { padding-bottom: 2rem; }
.nav-home, .nav-link { display: flex; align-items: center; gap: .55rem; border-radius: .55rem; color: #344054; text-decoration: none; }
.nav-home { margin-bottom: 1.1rem; padding: .55rem .7rem; font-weight: 700; }
.nav-group { margin-top: 1rem; }
.nav-heading { margin: 0 0 .35rem; color: #98a2b3; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.nav-link { padding: .45rem .7rem; font-size: .92rem; line-height: 1.25rem; }
.nav-link:hover, .nav-home:hover { background: var(--soft); color: var(--brand-dark); }
.nav-icon { width: 1rem; height: 1rem; flex: none; color: #98a2b3; }
.nav-link:hover .nav-icon, .nav-home:hover .nav-icon, .nav-link[aria-current="page"] .nav-icon, .nav-home[aria-current="page"] .nav-icon { color: var(--brand-dark); }
.nav-link span, .nav-home span { min-width: 0; }
.nav-link[aria-current="page"], .nav-home[aria-current="page"] { background: var(--soft); color: var(--brand-dark); font-weight: 800; }
.site-main { min-width: 0; }
.content-wrap { width: min(100%, 54rem); margin: 0 auto; padding: 2.75rem 1.25rem 4rem; }
.doc-content h1 { margin: 0 0 1rem; color: #101828; font-size: clamp(2rem, 5vw, 3.25rem); line-height: 1.04; font-weight: 850; letter-spacing: 0; }
.doc-content h2 { margin: 2.2rem 0 .85rem; color: #101828; font-size: 1.55rem; line-height: 1.2; font-weight: 800; }
.doc-content h3 { margin: 1.75rem 0 .65rem; color: #101828; font-size: 1.2rem; line-height: 1.3; font-weight: 800; }
.doc-content h4 { margin: 1.25rem 0 .45rem; color: #101828; font-size: 1rem; line-height: 1.35; font-weight: 800; }
.doc-content p { margin: .85rem 0; color: #344054; font-size: 1rem; line-height: 1.75; }
.doc-content ul, .doc-content ol { margin: 1rem 0 1.25rem 1.25rem; color: #344054; line-height: 1.75; }
.doc-content ul { list-style: disc; }
.doc-content ol { list-style: decimal; }
.doc-content li { padding-left: .25rem; }
.doc-content strong { color: #101828; font-weight: 800; }
.doc-content code { border-radius: .35rem; background: #f2f4f7; padding: .15rem .3rem; color: #101828; font-size: .9em; }
.doc-content pre { overflow: auto; border: 1px solid var(--line); border-radius: .75rem; background: #101828; padding: 1rem; color: #f9fafb; }
.doc-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; margin: 1.5rem 0 2rem; }
.doc-card { overflow: hidden; border: 1px solid var(--line); border-radius: .75rem; background: #fff; color: var(--ink); text-decoration: none; box-shadow: 0 12px 30px rgba(16,24,40,.05); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.doc-card:hover { transform: translateY(-2px); border-color: #ffb48f; box-shadow: 0 16px 36px rgba(16,24,40,.08); color: var(--ink); }
.doc-card__media { aspect-ratio: 16 / 9; background: linear-gradient(135deg, #fff4ee, #eef6ff); }
.doc-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.doc-card__body { padding: 1rem; }
.doc-card__body h3 { margin: 0 0 .4rem; font-size: 1rem; }
.doc-card__body p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.55; }
.steps { counter-reset: step; margin: 1.25rem 0 1.75rem; }
.step { counter-increment: step; position: relative; margin: 0 0 1rem; padding: .1rem 0 1rem 3rem; border-left: 1px solid #ffd7c4; }
.step::before { content: counter(step); position: absolute; left: -1rem; top: .15rem; display: grid; place-items: center; width: 2rem; height: 2rem; border: 2px solid #fff; border-radius: 999px; background: var(--brand); color: #fff; font-size: .86rem; font-weight: 850; box-shadow: 0 0 0 1px #ffd7c4; }
.step > :first-child { margin-top: 0; }
.callout { margin: 1.25rem 0; border: 1px solid var(--line); border-left: 4px solid #667085; border-radius: .75rem; background: #f8fafc; padding: .85rem 1rem; }
.callout p { margin: 0; }
.callout--info { border-left-color: #2e90fa; background: #eff8ff; }
.callout--success { border-left-color: #12b76a; background: #ecfdf3; }
.embed-card { display: flex; flex-direction: column; gap: .2rem; margin: 1rem 0; border: 1px solid var(--line); border-radius: .75rem; background: #fff; padding: 1rem; text-decoration: none; box-shadow: 0 10px 22px rgba(16,24,40,.04); }
.embed-card__label { color: var(--muted); font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.embed-card strong { color: var(--ink); overflow-wrap: anywhere; }
.embed-card span:last-child { color: var(--muted); }
.doc-figure { margin: 1.25rem 0 1.75rem; }
.doc-figure img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: .75rem; background: #fff; box-shadow: 0 16px 36px rgba(16,24,40,.08); }
.doc-figure--narrow img { width: auto; max-width: 100%; }
.pager { display: grid; grid-template-columns: 1fr; gap: .75rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.pager-link { display: flex; flex-direction: column; gap: .2rem; min-height: 5rem; justify-content: center; border: 1px solid var(--line); border-radius: .75rem; background: #fff; padding: 1rem; text-decoration: none; }
.pager-link span { color: var(--muted); font-size: .8rem; font-weight: 700; }
.pager-link strong { color: #101828; }
.pager-link:hover { border-color: #ffb48f; background: var(--soft); }
.pager-link--next { text-align: right; }
.no-results { margin: .75rem 0; color: var(--muted); font-size: .9rem; }
@media (min-width: 640px) { .pager { grid-template-columns: 1fr 1fr; } .pager-link--next { grid-column: 2; } }
@media (min-width: 1024px) {
    .mobile-topbar { display: none; }
    .site-shell { display: flex; align-items: flex-start; }
    .site-sidebar { position: sticky; top: 0; transform: none; width: 20rem; height: 100vh; flex: none; }
    .sidebar-overlay { display: none !important; }
    .site-main { flex: 1; }
    .content-wrap { padding: 4rem 2rem 5rem; }
}