/* Scops docs: the site's black, white and one green, set for long reading. Loaded after site.css and
   built around three columns: the docs menu, the article, and "On this page". */
:root {
  --dx-line: #2E2E2E;
  --dx-line-2: #262626;
  --dx-raise: #1C1C1C;
  --dx-raise-2: #141414;
  --dx-body: #C2C2C2;
  --dx-side: 268px;
  --dx-toc: 224px;
  --dx-top: 52px;
}

.dx-body { background: var(--bg); }
.dx-body .nav { background: rgba(18,18,18,.86); }

/* ---------- the bar: Docs beside the wordmark, search, and the menu button on small screens ---------- */
.dx-nav .nav-in { max-width: none; padding: 0 24px; gap: 28px; }
.dx-brand-docs { margin-left: -18px; padding-left: 14px; font: 600 15px/1 var(--display); letter-spacing: -0.01em; color: var(--ink-2); box-shadow: inset 1px 0 0 #2A2A2A; transition: color .2s; }
.dx-brand-docs:hover { color: var(--ink); }
.dx-nav .links { margin-left: 12px; }
.dx-search-pill { display: none; align-items: center; gap: 8px; height: 30px; padding: 0 8px 0 11px; border: 0; border-radius: 999px; background: #141414; box-shadow: inset 0 0 0 1px #262626; color: var(--ink-3); font: 500 13px var(--text); cursor: pointer; transition: color .2s, box-shadow .2s; }
.dx-search-pill:hover { color: var(--ink); box-shadow: inset 0 0 0 1px #3A3A3A; }
.dx-search-pill svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; flex: none; }
.dx-menu { display: none; width: 34px; height: 34px; margin-left: -8px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; position: relative; }
.dx-menu span, .dx-menu span::before, .dx-menu span::after { position: absolute; left: 9px; width: 16px; height: 1.6px; border-radius: 2px; background: var(--ink); content: ''; transition: transform .25s var(--ease), opacity .2s; }
.dx-menu span { top: 16px; }
.dx-menu span::before { left: 0; top: -5px; }
.dx-menu span::after { left: 0; top: 5px; }
.dx-open .dx-menu span { background: transparent; }
.dx-open .dx-menu span::before { transform: translateY(5px) rotate(45deg); }
.dx-open .dx-menu span::after { transform: translateY(-5px) rotate(-45deg); }

/* ---------- three columns ---------- */
.dx { display: grid; grid-template-columns: var(--dx-side) minmax(0, 1fr); max-width: 1480px; margin: 0 auto; padding-top: var(--dx-top); }
.dx-side { position: sticky; top: var(--dx-top); align-self: start; height: calc(100vh - var(--dx-top)); display: flex; flex-direction: column; padding: 22px 18px 0 24px; }
.dx-tree { display: grid; align-content: start; gap: 22px; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0 -8px; padding: 0 8px 48px; scrollbar-width: thin; scrollbar-color: #262626 transparent; }
.dx-tree::-webkit-scrollbar { width: 8px; }
.dx-tree::-webkit-scrollbar-thumb { background: #222; border-radius: 8px; }
.dx-group { display: grid; gap: 1px; }
.dx-group p { margin: 0 0 6px; padding-left: 10px; font: 600 12px/1.2 var(--text); letter-spacing: .04em; text-transform: uppercase; color: #8C8C8C; }
.dx-group a { position: relative; display: block; padding: 5px 10px; border-radius: 7px; font: 500 14px/1.35 var(--text); color: #9A9A9A; transition: color .15s, background .15s; }
.dx-group a:hover { color: var(--ink); background: #101010; }
.dx-group a.on { color: var(--ink); background: #141414; }
.dx-group a.on::before { content: ''; position: absolute; left: 0; top: 7px; bottom: 7px; width: 2px; border-radius: 2px; background: var(--olive); }

.dx-main { display: grid; grid-template-columns: minmax(0, 1fr) var(--dx-toc); gap: 48px; padding: 36px 32px 96px 40px; min-width: 0; }
.dx-article { max-width: 780px; min-width: 0; }

/* ---------- On this page ---------- */
.dx-toc { position: sticky; top: calc(var(--dx-top) + 36px); align-self: start; max-height: calc(100vh - var(--dx-top) - 60px); overflow-y: auto; padding-left: 16px; box-shadow: inset 1px 0 0 var(--dx-line); scrollbar-width: none; }
.dx-toc p { margin: 2px 0 10px; font: 600 12px/1 var(--text); letter-spacing: .04em; text-transform: uppercase; color: #8C8C8C; }
.dx-toc ul { display: grid; gap: 2px; }
.dx-toc li a { display: block; padding: 4px 0; font: 500 13px/1.4 var(--text); color: #8A8A8A; transition: color .15s; }
.dx-toc li.l3 a { padding-left: 12px; font-size: 12.5px; }
.dx-toc li a:hover { color: var(--ink); }
.dx-toc li a.on { color: var(--olive); }
.dx-top { display: inline-block; margin-top: 16px; font: 500 12.5px var(--text); color: #6E6E6E; }
.dx-top:hover { color: var(--ink); }

/* ---------- the article ---------- */
.dx-crumbs { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font: 500 13px var(--text); color: #8A8A8A; }
.dx-crumbs a { color: #8A8A8A; transition: color .15s; }
.dx-crumbs a:hover { color: var(--ink); }
.dx-crumbs i { width: 5px; height: 5px; border-top: 1.5px solid #4A4A4A; border-right: 1.5px solid #4A4A4A; transform: rotate(45deg); }
.dx-crumbs span { color: var(--olive); }

.prose { color: var(--dx-body); font: 400 16px/1.72 var(--text); }
.prose > h1 { font: 600 clamp(34px, 3.6vw, 46px)/1.08 var(--display); letter-spacing: -0.022em; color: var(--ink); margin: 0 0 14px; }
.prose .lead { margin: 0 0 30px; font-size: 19px; line-height: 1.6; color: #A9A9A9; text-wrap: pretty; }
.prose h2 { position: relative; margin: 52px 0 14px; font: 600 26px/1.2 var(--display); letter-spacing: -0.025em; color: var(--ink); scroll-margin-top: calc(var(--dx-top) + 24px); }
.prose h3 { position: relative; margin: 34px 0 10px; font: 600 19px/1.3 var(--display); letter-spacing: -0.015em; color: var(--ink); scroll-margin-top: calc(var(--dx-top) + 24px); }
.prose h4 { margin: 24px 0 6px; font: 600 16px/1.4 var(--text); color: var(--ink); }
.prose p { margin: 0 0 16px; }
.prose strong, .prose b { font-weight: 600; color: #EDEDED; }
.prose em { font-style: italic; }
.prose a { color: var(--olive); text-decoration: underline; text-decoration-color: rgba(64,191,140,.35); text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color .15s, text-decoration-color .15s; }
.prose a:hover { color: var(--olive-hi); text-decoration-color: currentColor; }
.prose ul, .prose ol { margin: 0 0 18px; padding-left: 22px; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin: 6px 0; padding-left: 4px; }
.prose li::marker { color: #5E5E5E; }
.prose ol > li::marker { color: #8A8A8A; font-weight: 600; font-size: .92em; }
.prose li > ul, .prose li > ol { margin: 6px 0 4px; }
.prose hr { height: 1px; margin: 40px 0; border: 0; background: var(--dx-line); }
.prose code { padding: .12em .42em; border-radius: 6px; background: #161616; box-shadow: inset 0 0 0 1px #262626; font: 500 .86em/1.4 var(--mono); color: #E2E2E2; white-space: nowrap; }
.prose a code { color: inherit; }
.prose kbd { display: inline-block; min-width: 1.6em; padding: 1px 6px; border-radius: 6px; background: #151515; box-shadow: inset 0 0 0 1px #2E2E2E, inset 0 -1.5px 0 #2E2E2E; font: 600 12.5px/1.5 var(--text); color: #E5E5E5; text-align: center; }
.h-anchor { position: absolute; left: -24px; top: 0; bottom: 0; width: 20px; opacity: 0; text-decoration: none !important; transition: opacity .15s; }
.h-anchor::before { content: '#'; font: 500 .8em/inherit var(--text); color: #4E4E4E; }
.prose h2:hover .h-anchor, .prose h3:hover .h-anchor, .h-anchor:focus-visible { opacity: 1; }
.h-anchor:hover::before { color: var(--olive); }

/* code blocks: a copy button, and SQL coloured by docs.js */
.prose pre { position: relative; margin: 0 0 22px; padding: 16px 18px; border-radius: 12px; background: var(--dx-raise); box-shadow: inset 0 0 0 1px #222; overflow-x: auto; font: 400 13.5px/1.65 var(--mono); color: #DADADA; tab-size: 4; scrollbar-width: thin; scrollbar-color: #2A2A2A transparent; }
.prose pre code { padding: 0; background: none; box-shadow: none; font: inherit; color: inherit; white-space: pre; }
.prose pre .k { color: #7BE1B2; }
.prose pre .s { color: #F2C77B; }
.prose pre .c { color: #6E6E6E; font-style: italic; }
.prose pre .n { color: #9FC6FF; }
.dx-copy { position: absolute; top: 8px; right: 8px; height: 28px; padding: 0 10px; border: 0; border-radius: 8px; background: #1A1A1A; box-shadow: inset 0 0 0 1px #2C2C2C; color: var(--ink-3); font: 600 12px var(--text); cursor: pointer; opacity: 0; transition: opacity .15s, color .15s; }
.prose pre:hover .dx-copy, .dx-copy:focus-visible { opacity: 1; }
.dx-copy:hover { color: var(--ink); }
.dx-copy.done { color: var(--olive); opacity: 1; }
.prose .code-title { margin: 0; padding: 9px 16px; border-radius: 12px 12px 0 0; background: #141414; box-shadow: inset 0 0 0 1px #222; font: 600 12.5px var(--text); color: var(--ink-3); }
.prose .code-title + pre { border-top-left-radius: 0; border-top-right-radius: 0; }

/* screenshots: a framed picture that opens full size */
.prose figure { margin: 26px 0 30px; }
.prose figure.shot img, .prose img.shot { display: block; width: 100%; height: auto; border-radius: 12px; background: #1C1C1C; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 24px 60px -30px #000; cursor: zoom-in; }
.prose figure.shot.narrow { max-width: 560px; }
.prose figure.shot.medium { max-width: 680px; }
.prose figure.shot.small { max-width: 420px; }
.prose figure.shot.tiny { max-width: 320px; }
.prose figure.shot.center { margin-left: auto; margin-right: auto; }
.prose figcaption { margin-top: 12px; font: 400 14px/1.5 var(--text); color: #8A8A8A; }
.prose figure.shot.center figcaption { text-align: center; }
.prose .shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 26px 0 30px; }
.prose .shots figure { margin: 0; }

/* a diagram drawn in the page (inline SVG): boxes, lines and labels in the docs' own inks */
.prose figure.diagram { margin: 26px 0 30px; padding: 22px 20px; border-radius: 14px; background: #1C1C1C; box-shadow: inset 0 0 0 1px #2E2E2E; }
.prose figure.diagram svg { display: block; width: 100%; height: auto; overflow: visible; }
.dg-box { fill: #111; stroke: #2C2C2C; stroke-width: 1.2; }
.dg-accent { stroke: rgba(64,191,140,.55); fill: rgba(64,191,140,.04); }
.dg-pill { fill: #161616; stroke: #2E2E2E; stroke-width: 1; }
.dg-chip { fill: #181818; stroke: #2A2A2A; stroke-width: 1; }
.dg-line { fill: none; stroke: #4A4A4A; stroke-width: 1.4; stroke-dasharray: 4 4; }
.dg-head { fill: none; stroke: #6A6A6A; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.dg-t { fill: #EDEDED; font: 600 14px var(--text); }
.dg-t2 { fill: #DADADA; font: 600 13px var(--text); }
.dg-s { fill: #8A8A8A; font: 500 11.5px var(--text); }
.dg-c { fill: #BDBDBD; font: 500 11px var(--mono); }

/* callouts */
.prose .callout { position: relative; margin: 22px 0 24px; padding: 14px 18px 14px 48px; border-radius: 12px; background: #101113; box-shadow: inset 0 0 0 1px #23262B; font-size: 15px; line-height: 1.65; color: #BDBDBD; }
.prose .callout > :last-child { margin-bottom: 0; }
.prose .callout::before { content: ''; position: absolute; left: 16px; top: 16px; width: 18px; height: 18px; background: #8EA4BE; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.prose .callout { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 7.5h.01'/%3E%3C/svg%3E"); }
.prose .callout.tip { background: rgba(64,191,140,.06); box-shadow: inset 0 0 0 1px rgba(64,191,140,.22); --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-3.6 10.8c.6.5 1 1.2 1.1 2.2h5c.1-1 .5-1.7 1.1-2.2A6 6 0 0 0 12 3z'/%3E%3C/svg%3E"); }
.prose .callout.tip::before { background: var(--olive); }
.prose .callout.warning { background: rgba(242,182,84,.06); box-shadow: inset 0 0 0 1px rgba(242,182,84,.24); --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l9.5 16.5h-19z'/%3E%3Cpath d='M12 10v4.5M12 17.5h.01'/%3E%3C/svg%3E"); }
.prose .callout.warning::before { background: var(--warn); }
.prose .callout.danger { background: rgba(240,97,107,.06); box-shadow: inset 0 0 0 1px rgba(240,97,107,.25); --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9 9l6 6M15 9l-6 6'/%3E%3C/svg%3E"); }
.prose .callout.danger::before { background: var(--crit); }
.prose .callout strong:first-child { color: var(--ink); }

/* numbered steps */
.prose ol.steps { list-style: none; counter-reset: step; margin: 24px 0 28px; padding: 0; }
.prose ol.steps > li { position: relative; counter-increment: step; margin: 0; padding: 0 0 26px 46px; }
.prose ol.steps > li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; background: #151515; box-shadow: inset 0 0 0 1px #2E2E2E; display: grid; place-items: center; font: 600 13px/28px var(--text); color: var(--ink); text-align: center; }
.prose ol.steps > li::after { content: ''; position: absolute; left: 13.5px; top: 34px; bottom: 6px; width: 1px; background: #232323; }
.prose ol.steps > li:last-child { padding-bottom: 4px; }
.prose ol.steps > li:last-child::after { display: none; }
.prose ol.steps > li > p:first-child { padding-top: 2px; }
.prose ol.steps > li > :last-child { margin-bottom: 0; }
.prose ol.steps figure { margin: 16px 0 6px; }

/* tables */
.prose .table-wrap { margin: 18px 0 26px; overflow-x: auto; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--dx-line-2); scrollbar-width: thin; }
.prose table { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.55; }
.prose .table-wrap > table { margin: 0; }
.prose > table { margin: 18px 0 26px; }
.prose th { padding: 10px 14px; background: #1C1C1C; text-align: left; font: 600 12.5px/1.3 var(--text); letter-spacing: .02em; color: #9A9A9A; border-bottom: 1px solid var(--dx-line-2); white-space: nowrap; }
.prose td { padding: 11px 14px; vertical-align: top; border-bottom: 1px solid var(--dx-line); }
.prose tr:last-child td { border-bottom: 0; }
.prose td:first-child { color: #E6E6E6; font-weight: 500; }
.prose td p { margin: 0 0 6px; }
.prose td p:last-child { margin: 0; }

/* cards between pages */
.prose .cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 20px 0 28px; }
.prose .cards a.card { display: block; padding: 16px 18px; border-radius: 12px; background: var(--dx-raise); box-shadow: inset 0 0 0 1px #202020; text-decoration: none; transition: box-shadow .2s, background .2s; }
.prose .cards a.card:hover { background: #121212; box-shadow: inset 0 0 0 1px #333; }
.prose .cards a.card b { display: block; font: 600 16px/1.3 var(--display); letter-spacing: -0.01em; color: var(--ink); }
.prose .cards a.card span { display: block; margin-top: 4px; font: 400 14px/1.5 var(--text); color: #8F8F8F; }
.prose .cards a.card b::after { content: ' \2192'; color: var(--olive); opacity: 0; transition: opacity .2s; }
.prose .cards a.card:hover b::after { opacity: 1; }

/* small labels: an edition, a permission, a status word */
.prose .badge { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; background: rgba(64,191,140,.1); box-shadow: inset 0 0 0 1px rgba(64,191,140,.3); font: 600 12px/1 var(--text); color: var(--olive); vertical-align: 3px; white-space: nowrap; }
.prose h2 .badge, .prose h3 .badge { margin-left: 10px; vertical-align: 4px; }
.prose .badge.gray { background: #161616; box-shadow: inset 0 0 0 1px #2C2C2C; color: #A8A8A8; }
.prose .perm { display: inline-flex; align-items: center; gap: 6px; padding: 1px 9px 1px 8px; border-radius: 999px; background: #151515; box-shadow: inset 0 0 0 1px #2A2A2A; font: 600 12.5px/1.6 var(--text); color: #D8D8D8; white-space: nowrap; }
.prose .perm::before { content: ''; width: 10px; height: 10px; background: #8A8A8A; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center / contain no-repeat; }
.prose .path { font-weight: 600; color: #EDEDED; white-space: nowrap; }

/* a definition list: the glossary, settings explained one by one */
.prose dl { margin: 0 0 24px; }
.prose dt { margin-top: 20px; font: 600 16px/1.4 var(--display); color: var(--ink); scroll-margin-top: calc(var(--dx-top) + 24px); }
.prose dd { margin: 4px 0 0; }

/* at a glance: two to four facts in a row */
.prose .facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px; margin: 22px 0 30px; border-radius: 12px; overflow: hidden; background: var(--dx-line-2); box-shadow: inset 0 0 0 1px var(--dx-line-2); }
.prose .facts > div { padding: 14px 16px; background: var(--dx-raise); }
.prose .facts b { display: block; font: 600 15px/1.3 var(--display); color: var(--ink); }
.prose .facts span { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.5; color: #8F8F8F; }

/* the foot of a page */
.dx-updated { margin: 56px 0 18px; font: 500 13px var(--text); color: #6E6E6E; }
.dx-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dx-pager a { display: grid; gap: 4px; padding: 14px 18px; border-radius: 12px; box-shadow: inset 0 0 0 1px #222; text-decoration: none; transition: box-shadow .2s, background .2s; }
.dx-pager a:hover { background: #1C1C1C; box-shadow: inset 0 0 0 1px #363636; }
.dx-pager a span { font: 500 12.5px var(--text); color: #7E7E7E; }
.dx-pager a b { font: 600 16px/1.3 var(--display); letter-spacing: -0.01em; color: var(--ink); }
.dx-pager .next { text-align: right; }
.dx-pager .prev span::before { content: '\2190  '; }
.dx-pager .next span::after { content: '  \2192'; }

/* ---------- the docs home ---------- */
.dx-side-home { display: none; }
.dx-home { max-width: var(--max); margin: 0 auto; padding: calc(var(--dx-top) + 72px) var(--gutter) 100px; }
.dx-hero { max-width: 760px; }
.dx-hero .title { font-size: clamp(40px, 5.4vw, 70px); }
.dx-hero .sub { margin-top: 18px; max-width: 620px; }
.dx-starts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 56px; }
.dx-start { position: relative; display: grid; gap: 6px; padding: 22px 22px 24px; border-radius: 16px; background: linear-gradient(180deg, #111 0%, #1C1C1C 100%); box-shadow: inset 0 0 0 1px #222; transition: box-shadow .25s; }
.dx-start:hover { box-shadow: inset 0 0 0 1px #3A3A3A; }
.dx-start i { width: 28px; height: 28px; margin-bottom: 10px; border-radius: 50%; display: grid; place-items: center; background: var(--olive); color: var(--olive-ink); font: 700 14px/1 var(--display); font-style: normal; }
.dx-start b { font: 600 21px/1.2 var(--display); letter-spacing: -0.02em; color: var(--ink); }
.dx-start span { font-size: 15px; line-height: 1.5; color: var(--ink-3); }
.dx-start::after { content: '\2192'; position: absolute; right: 20px; top: 22px; color: var(--ink-3); transition: transform .25s var(--ease), color .25s; }
.dx-start:hover::after { color: var(--olive); transform: translateX(3px); }
.dx-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 56px; }
.dx-card { padding: 22px 22px 18px; border-radius: 16px; background: #1C1C1C; box-shadow: inset 0 0 0 1px #2E2E2E; }
.dx-card-h { display: flex; align-items: center; gap: 12px; }
.dx-card-h svg { width: 22px; height: 22px; padding: 7px; box-sizing: content-box; border-radius: 10px; background: #151515; box-shadow: inset 0 0 0 1px #262626; fill: none; stroke: var(--olive); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.dx-card h2 { font: 600 20px/1.2 var(--display); letter-spacing: -0.02em; }
.dx-card > p { margin: 12px 0 14px; font-size: 15px; line-height: 1.5; color: var(--ink-3); }
.dx-card-links { display: grid; }
.dx-card-links a { padding: 8px 0; border-top: 1px solid #191919; font: 500 15px var(--text); color: var(--ink-2); transition: color .15s; }
.dx-card-links a:hover { color: var(--olive); }
.dx-more { display: block; border-top: 1px solid #191919; }
.dx-more summary { padding: 8px 0 2px; font: 500 13px var(--text); color: #7E7E7E; cursor: pointer; list-style: none; transition: color .15s; }
.dx-more summary::-webkit-details-marker { display: none; }
.dx-more summary::after { content: ''; display: inline-block; width: 5px; height: 5px; margin-left: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.dx-more[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.dx-more summary:hover { color: var(--ink); }
.dx-more[open] summary { padding-bottom: 6px; }
.dx-help { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: 56px; padding: 28px 30px; border-radius: 20px; background: var(--surface); box-shadow: inset 0 0 0 1px #222; }
.dx-help h2 { font-size: 26px; }
.dx-help p { margin-top: 6px; color: var(--ink-3); }

/* ---------- search ---------- */
@keyframes dxFade { from { opacity: 0; } }

/* ---------- search: a box you type in; the results open right under it ---------- */
.dx-find { position: relative; flex: none; display: flex; align-items: center; gap: 9px; height: 38px; margin-bottom: 18px; padding: 0 8px 0 12px; border-radius: 10px; background: #1C1C1C; box-shadow: inset 0 0 0 1px #2E2E2E; color: var(--ink-3); transition: box-shadow .2s; }
.dx-find:hover { box-shadow: inset 0 0 0 1px #343434; }
.dx-find:focus-within { box-shadow: inset 0 0 0 1px #4A4A4A; }
.dx-find > svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; flex: none; }
.dx-find input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font: 500 14px var(--text); }
.dx-find input::placeholder { color: #707070; }
.dx-find input::-webkit-search-cancel-button { display: none; }
.dx-find kbd { font: 500 11px var(--text); color: var(--ink-3); padding: 2px 6px; border-radius: 6px; box-shadow: inset 0 0 0 1px #2E2E2E; }
.dx-find:focus-within kbd { display: none; }
.dx-find-list { position: absolute; z-index: 80; left: 0; top: calc(100% + 6px); width: 460px; max-height: min(62vh, 560px); overflow-y: auto; padding: 6px; border-radius: 12px; background: #232323; box-shadow: 0 0 0 1px #3E3E3E, 0 30px 80px -20px #000; scrollbar-width: thin; scrollbar-color: #2A2A2A transparent; }
.dx-find-list[hidden] { display: none; }
.dx-find-item { display: grid; gap: 1px; padding: 9px 11px; border-radius: 9px; color: var(--ink-2); text-decoration: none; }
.dx-find-item b { font: 600 14px/1.35 var(--text); color: var(--ink); }
.dx-find-item small { font: 500 12px/1.3 var(--text); color: var(--ink-3); }
.dx-find-item span { margin-top: 3px; font-size: 13px; line-height: 1.5; color: #8F8F8F; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.dx-find-item mark { background: none; color: var(--olive); font-weight: 600; }
.dx-find-item.on { background: #1A1A1A; }
.dx-find-empty { margin: 0; padding: 14px 12px; font-size: 14px; color: var(--ink-3); }
.dx-find-hero { width: min(560px, 100%); height: 52px; margin: 32px 0 0; padding: 0 12px 0 18px; border-radius: 14px; box-shadow: inset 0 0 0 1px #262626, 0 30px 60px -40px #000; }
.dx-find-hero > svg { width: 18px; height: 18px; }
.dx-find-hero input { font-size: 16px; }
.dx-find-hero .dx-find-list { width: 100%; }

/* ---------- a screenshot, full size ---------- */
.dx-lb { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; padding: 3vh 3vw; background: rgba(0,0,0,.9); cursor: zoom-out; animation: dxFade .15s ease-out; }
.dx-lb[hidden] { display: none; }
.dx-lb img { max-width: 100%; max-height: 94vh; border-radius: 10px; box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 40px 120px -20px #000; }
.dx-lb figcaption { margin-top: 12px; text-align: center; font-size: 14px; color: var(--ink-3); }

.dx-scrim { position: fixed; inset: var(--dx-top) 0 0; z-index: 40; background: rgba(0,0,0,.55); }
.dx-scrim[hidden] { display: none; }

/* ---------- narrower screens ---------- */
@media (max-width: 1240px) {
  .dx-main { grid-template-columns: minmax(0, 1fr); padding-right: 40px; }
  .dx-toc { display: none; }
}
@media (max-width: 1100px) {
  .dx-nav .links { display: none; }
}
@media (max-width: 900px) {
  .dx { grid-template-columns: minmax(0, 1fr); }
  .dx-menu { display: block; }
  .dx-side, .dx-side-home { display: block; position: fixed; z-index: 50; top: var(--dx-top); left: 0; bottom: 0; align-self: stretch; width: min(320px, 86vw); height: auto; background: #171717; box-shadow: 1px 0 0 #2E2E2E, 30px 0 60px -30px #000; transform: translateX(-102%); transition: transform .3s var(--ease); }
  .dx-open .dx-side, .dx-open .dx-side-home { transform: none; }
  .dx-main { padding: 28px var(--gutter) 80px; }
  .dx-search-pill { display: inline-flex; width: 32px; padding: 0; justify-content: center; }
  .dx-nav .nav-in { padding: 0 var(--gutter); gap: 16px; }
  .dx-side .dx-find-list { width: 100%; }
  .dx-brand-docs { margin-left: -6px; padding-left: 10px; }
  .dx-starts, .dx-cards { grid-template-columns: 1fr; }
  .dx-home { padding-top: calc(var(--dx-top) + 48px); }
}
@media (max-width: 640px) {
  .prose { font-size: 16px; }
  .prose .lead { font-size: 17.5px; }
  .prose h2 { font-size: 23px; margin-top: 44px; }
  .prose .cards, .prose .shots { grid-template-columns: 1fr; }
  .dx-pager { grid-template-columns: 1fr; }
  .dx-pager .next { text-align: left; }
  .h-anchor { display: none; }
  .dx-nav .btn-sm { display: none; }
}
@media (prefers-contrast: more) {
  :root { --dx-body: #DADADA; --dx-line: #2E2E2E; }
  .dx-group a, .dx-toc li a { color: #BDBDBD; }
}
@media (prefers-reduced-motion: reduce) {
  .dx-side { transition: none; }
}