:root {
  color-scheme: light;
  --guide-dark: #0a1015;
  --guide-ink: #172127;
  --guide-paper: #f1f1ec;
  --guide-line: #d1d5d1;
  --guide-cyan: #68f2e3;
  --guide-orange: #ff8059;
  --guide-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --guide-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --guide-body: "Manrope", "Avenir Next", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; color: var(--guide-ink); background: var(--guide-paper); font: 14px/1.75 var(--guide-body); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
::selection { color: var(--guide-dark); background: var(--guide-cyan); }
.skip-link { position: fixed; z-index: 1000; top: -60px; left: 16px; padding: 10px 14px; background: #fff; }
.skip-link:focus { top: 12px; }
.guide-header { position: sticky; z-index: 20; top: 0; height: 64px; border-bottom: 1px solid #28333a; background: rgba(10,16,21,.97); color: #f0f3ed; }
.guide-bar-inner { width: min(1160px, calc(100% - 56px)); height: 100%; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.guide-brand { display: inline-flex; align-items: center; gap: 10px; font: 700 20px/1 var(--guide-display); }
.guide-brand-mark { width: 27px; height: 27px; display: grid; place-items: center; border: 1px solid var(--guide-cyan); color: var(--guide-cyan); }
.guide-brand small { color: #829096; font: 500 9px/1 var(--guide-mono); }
.guide-header nav { display: flex; align-items: center; gap: 24px; color: #aeb9ba; font-size: 11px; font-weight: 800; }
.guide-header nav a:hover, .guide-header nav a:focus-visible { color: var(--guide-cyan); }
.guide-header nav span { color: var(--guide-orange); }
.guide-shell { width: min(1160px, calc(100% - 56px)); margin: auto; }
.guide-breadcrumb { padding: 22px 0 0; color: #738087; font: 9px/1.5 var(--guide-mono); text-transform: uppercase; }
.guide-breadcrumb a:hover { color: #13756e; }
.guide-breadcrumb span { margin: 0 7px; color: var(--guide-orange); }
.guide-title { padding: 42px 0 39px; border-bottom: 1px solid var(--guide-line); }
.guide-kicker { margin: 0 0 9px; color: #617178; font: 10px/1.4 var(--guide-mono); text-transform: uppercase; }
.guide-kicker span { color: var(--guide-orange); }
.guide-title h1 { margin: 0; color: var(--guide-ink); font: 700 72px/.95 var(--guide-display); }
.guide-deck { max-width: 760px; margin: 12px 0 0; color: #536169; font-size: 15px; line-height: 1.8; }
.guide-include { display: inline-block; margin-top: 19px; padding: 7px 9px; border-left: 2px solid #138f85; background: #e4e8e2; color: #26383c; font: 10px/1.5 var(--guide-mono); }
.guide-layout { display: grid; grid-template-columns: minmax(0,1fr) 205px; gap: 68px; padding: 45px 0 75px; align-items: start; }
.guide-content { min-width: 0; }
.guide-content section + section { margin-top: 42px; }
.guide-content h2 { margin: 0 0 14px; font: 600 30px/1.05 var(--guide-display); }
.guide-content h3 { margin: 23px 0 8px; font-size: 13px; }
.guide-content p { margin: 0 0 12px; color: #48565d; }
.guide-content ul { margin: 0; padding-left: 20px; color: #48565d; }
.guide-content li + li { margin-top: 6px; }
.guide-content a { color: #116d66; text-decoration: underline; text-underline-offset: 3px; }
.guide-content code, .guide-aside code { color: #116d66; font: .92em var(--guide-mono); }
.guide-content pre { max-width: 100%; margin: 0; padding: 19px 21px; overflow-x: auto; border: 1px solid #25343b; background: #0d151b; color: #dce6e1; font: 11px/1.8 var(--guide-mono); tab-size: 4; }
.guide-content pre code { color: inherit; font: inherit; }
.guide-content table { width: 100%; border-collapse: collapse; font-size: 11px; line-height: 1.65; }
.guide-content th { padding: 9px 11px; border-bottom: 1px solid #89949a; color: #47545b; font: 9px/1.4 var(--guide-mono); text-align: left; text-transform: uppercase; }
.guide-content td { padding: 10px 11px; border-bottom: 1px solid var(--guide-line); vertical-align: top; }
.guide-content td:first-child { min-width: 175px; }
.guide-content td code { white-space: normal; }
.guide-content .table-wrap { overflow-x: auto; }
.guide-aside { position: sticky; top: 91px; padding-left: 18px; border-left: 1px solid var(--guide-line); }
.guide-aside h2 { margin: 0 0 11px; color: #707d83; font: 9px/1.4 var(--guide-mono); text-transform: uppercase; }
.guide-aside nav { display: grid; gap: 8px; }
.guide-aside nav a { color: #4e5d63; font-size: 10px; font-weight: 700; }
.guide-aside nav a:hover { color: #087c72; }
.guide-aside .aside-rule { height: 1px; margin: 18px 0; background: var(--guide-line); }
.guide-aside p { margin: 0; color: #6a777d; font-size: 10px; line-height: 1.8; }
.guide-pager { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--guide-line); border-bottom: 1px solid var(--guide-line); }
.guide-pager a { min-height: 74px; display: flex; flex-direction: column; justify-content: center; gap: 3px; }
.guide-pager a:last-child { align-items: flex-end; border-left: 1px solid var(--guide-line); text-align: right; }
.guide-pager small { color: #758188; font: 9px/1.4 var(--guide-mono); text-transform: uppercase; }
.guide-pager strong { font-size: 11px; }
.guide-pager a:hover strong { color: #087c72; }
.guide-footer { display: flex; justify-content: space-between; gap: 16px; padding: 21px 0 26px; color: #78848a; font: 10px/1.5 var(--guide-mono); }
.guide-footer a:hover { color: #087c72; }
@media (max-width: 760px) {
  html { scroll-padding-top: 70px; }
  .guide-bar-inner, .guide-shell { width: calc(100% - 36px); }
  .guide-header { height: 58px; }
  .guide-header nav { gap: 14px; font-size: 10px; }
  .guide-title { padding: 35px 0 30px; }
  .guide-title h1 { font-size: 59px; }
  .guide-deck { font-size: 13px; }
  .guide-layout { grid-template-columns: 1fr; gap: 35px; padding: 32px 0 50px; }
  .guide-aside { position: static; order: -1; padding: 0 0 13px; border: 0; border-bottom: 1px solid var(--guide-line); }
  .guide-aside nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }
  .guide-aside .aside-rule, .guide-aside p { display: none; }
  .guide-content section + section { margin-top: 34px; }
  .guide-content h2 { font-size: 27px; }
  .guide-content table { min-width: 560px; }
  .guide-footer { font-size: 8px; }
}
@media (max-width: 430px) {
  .guide-brand { font-size: 17px; }
  .guide-brand small { display: none; }
  .guide-header nav { gap: 10px; }
  .guide-header nav a:last-child { display: none; }
  .guide-title h1 { font-size: 52px; }
  .guide-footer { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; }
}
html[data-theme="dark"] {
  color-scheme: dark;
  --guide-paper: #0d151b;
  --guide-ink: #e7eeea;
  --guide-line: #2a363d;
}
html[data-theme="dark"] body { background: #0a1015; }
html[data-theme="dark"] .guide-title { border-color: var(--guide-line); }
html[data-theme="dark"] .guide-kicker, html[data-theme="dark"] .guide-breadcrumb { color: #91a0a5; }
html[data-theme="dark"] .guide-deck, html[data-theme="dark"] .guide-content p, html[data-theme="dark"] .guide-content ul { color: #aab6b8; }
html[data-theme="dark"] .guide-include { border-color: var(--guide-cyan); background: #142126; color: #dce8e3; }
html[data-theme="dark"] .guide-content a, html[data-theme="dark"] .guide-content code, html[data-theme="dark"] .guide-aside code { color: var(--guide-cyan); }
html[data-theme="dark"] .guide-content pre code { color: inherit; }
html[data-theme="dark"] .guide-content th { border-color: #56636a; color: #aeb9ba; }
html[data-theme="dark"] .guide-content td { border-color: var(--guide-line); }
html[data-theme="dark"] .guide-aside { border-color: var(--guide-line); }
html[data-theme="dark"] .guide-aside h2, html[data-theme="dark"] .guide-aside nav a, html[data-theme="dark"] .guide-aside p { color: #a0adb0; }
html[data-theme="dark"] .guide-aside .aside-rule, html[data-theme="dark"] .guide-pager { border-color: var(--guide-line); }
html[data-theme="dark"] .guide-pager small, html[data-theme="dark"] .guide-footer { color: #87949a; }
html[data-theme="dark"] .skip-link { background: #172127; color: #e7eeea; }