.site-header{position:static;background:#f7f8f2;border-bottom:1px solid #dce3d8}.site-primary{width:min(1200px,calc(100% - 64px));margin:auto;min-height:86px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:15px 0}.site-header .logo{white-space:nowrap}.site-primary nav{display:flex;flex-wrap:wrap;gap:26px;align-items:center}.site-primary nav a{font-size:14px;text-decoration:none}.site-primary nav a[aria-current=page]{text-decoration:underline;text-underline-offset:6px}.site-secondary{position:static;background:#f0f3eb;border-bottom:1px solid #dce3d8}.site-secondary-inner{width:min(1200px,calc(100% - 64px));margin:auto;display:flex;align-items:center;gap:15px;flex-wrap:wrap;padding:13px 0}.site-secondary a{text-decoration:none;font-size:13px}.site-secondary .overview-link{background:white;border:1px solid #dce3d8;border-radius:5px;padding:8px 12px}.site-secondary label{display:inline;font-size:13px;margin:0}.site-secondary select{font-family:inherit;font-size:13px;background:white;color:#17392f;border:1px solid #dce3d8;border-radius:5px;padding:9px 12px;max-width:100%}.site-secondary .tool-select{max-width:360px}.site-secondary .development-status{margin-left:auto;color:#506359;font-size:11px}.site-secondary select:focus-visible{outline:3px solid #90b841;outline-offset:3px}
@media(max-width:760px){.site-primary,.site-secondary-inner{width:calc(100% - 40px)}.site-primary{flex-wrap:wrap;gap:14px}.site-primary nav{gap:16px}.site-primary nav a{font-size:12px}.site-secondary-inner{gap:10px}.site-secondary .development-status{width:100%;margin-left:0}.site-secondary .tool-select{width:100%;max-width:100%}}
@media print{.site-header,.site-secondary{display:none}}

.site-header-stack{position:sticky;top:0;z-index:100;background:#f7f8f2}html{scroll-padding-top:175px}.phase-nav{position:static}section[id]{scroll-margin-top:175px}@media(max-width:760px){html{scroll-padding-top:260px}section[id]{scroll-margin-top:260px}}@media print{.site-header-stack{display:none}}

/* Consistent breathing room around elements embedded in teaching text. */
:root{--content-element-gap:24px}
main .table-scroll,main .technical-table,main .spec-table,main article .box,main .about .box,main .about .brand-demo,main article figure,main .about figure,main article pre,main .about pre{margin-block:var(--content-element-gap,24px)!important}
main article figure,main .about figure{margin-inline:0}
main article figure .box,main article figure .table-scroll,main article .box .table-scroll{margin-block:0!important}
main article p:has(+ .table-scroll),main article p:has(+ .box),main article p:has(+ figure),main .about p:has(+ .spec-table),main .about p:has(+ .brand-demo),main article p:has(+ pre){margin-bottom:0}
main article .table-scroll + p,main article .box + p,main article figure + p,main article pre + p,main .about .spec-table + p,main .about .brand-demo + p{margin-top:0}

main p:has(+ .table-scroll),main p:has(+ .spec-table),main p:has(+ .technical-table),main p:has(+ .brand-demo){margin-bottom:0}main .table-scroll + p,main .spec-table + p,main .technical-table + p{margin-top:0}

/* Frozen header height is measured for accurate anchors and an unobstructed TOC. */
html{scroll-padding-top:0}section[id]{scroll-margin-top:calc(var(--frozen-header-height,175px) + 18px)}
.layout > aside{top:calc(var(--frozen-header-height,175px) + 20px);max-height:calc(100vh - var(--frozen-header-height,175px) - 40px);overflow:auto}
@media(max-width:850px){.layout > aside{max-height:none;overflow:visible}}