*,
			*::before,
			*::after {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			/* The legacy aliases (--white, --off-white, --black, --ink, --mid, --light,
			   --teal*) are NOT redeclared here any more. docs.css loads after
			   marketing-shell.css, so this block shadowed the warm palette with the
			   retired cool one and every one of the 46 docs pages rendered on the old
			   var(--paper-0) / #0f1117 ground while the rest of the site had moved. Inherit
			   them; marketing-shell.css is linked on layout: docs. */
			:root {
				--font: var(--font-text, "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif); /* fallback: standalone layouts do not link marketing-shell.css */
				--mono: 'IBM Plex Mono', monospace;
				/* Docs is PAPER now, like the rest of the site. The ink and signal
				   flips that lived here are gone: nothing to flip when there is one
				   ground. Inherits everything from marketing-shell.css. */

				--dark-bg: var(--paper-0);  /* paper 0831: canvas */
				--dark-band: var(--paper-2);  /* paper 0831: band */
				--dark-surface: var(--paper-1);  /* paper 0831: surface */
				/* One step above --dark-surface, same cool cast. The shared set has no
				   equivalent for this raised surface (used by code blocks here), so
				   this value is chosen to sit in the new family rather than derived. */
				--dark-border: var(--rule-1);  /* paper 0831: hairline */
				--dark-border-strong: var(--rule-2);  /* paper 0831: strong rule */
			}
			html {
				scroll-behavior: smooth;
				height: 100%;
			}
			body {
				font-family: var(--font);
				background: var(--paper-0);
				color: var(--ink-0);
				-webkit-font-smoothing: antialiased;
				-moz-osx-font-smoothing: grayscale;
				overflow-x: hidden;
				min-height: 100vh;
			}

			/* SKIP LINK */
			.skip-link {
				position: absolute;
				top: -100%;
				left: 0;
				background: var(--teal);
				color: var(--paper-1);
				padding: 8px 16px;
				font-size: 14px;
				font-weight: 600;
				z-index: 200;
				text-decoration: none;
				border-radius: 0 0 4px 0;
			}
			.skip-link:focus {
				top: 0;
			}
			a:focus-visible,
			button:focus-visible {
				outline: 2px solid var(--teal);
				outline-offset: 3px;
				border-radius: 2px;
			}

			/* NAV */
			nav.main-nav {
				position: fixed;
				top: 0;
				left: 0;
				right: 0;
				z-index: 120;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 48px;
				height: 68px;
				background: rgba(251, 249, 244, 0.96);  /* paper 0831 */
				border-bottom: 1px solid var(--rule-1);
			}
			@media (prefers-reduced-motion: no-preference) {
				nav.main-nav {
					backdrop-filter: blur(12px);
				}
			}
			.nav-logo {
				font-size: 26px;
				font-weight: 800;
				letter-spacing: -0.03em;
				color: var(--ink-0);
				text-decoration: none;
				padding: 4px 8px 4px 0;
				flex-shrink: 0;
			}
			.nav-logo-img {
				height: 31px;
				width: auto;
				display: block;
			}
			.nav-links {
				display: flex;
				gap: 36px;
				list-style: none;
			}
			.nav-links a {
				font-size: 14px;
				font-weight: 500;
				color: var(--ink-2);
				text-decoration: none;
				transition: color 0.18s;
			}
			.nav-links a:hover {
				color: var(--ink-1);
			}
			.nav-links a.active {
				color: var(--ink-0);
				font-weight: 600;
			}
			.nav-links a:focus-visible {
				outline: 2px solid var(--teal);
				outline-offset: 3px;
				border-radius: 2px;
			}
			.nav-right {
				display: flex;
				gap: 12px;
				align-items: center;
			}

			.btn-nav-solid {
				font-size: 14px;
				font-weight: 700;
				color: var(--paper-1);
				background: var(--teal);
				text-decoration: none;
				padding: 9px 22px;
				border-radius: 100px;
				box-shadow: 0 2px 10px rgba(13, 92, 82, 0.35);
				transition: background 0.18s, transform 0.18s, box-shadow 0.18s;
				white-space: nowrap;
			}
			.btn-nav-solid:hover {
				background: var(--teal-mid);
				transform: translateY(-1px);
				box-shadow: 0 4px 16px rgba(13, 92, 82, 0.45);
			}
			.btn-nav-solid:focus-visible {
				outline: 2px solid var(--teal);
				outline-offset: 2px;
				border-radius: 100px;
			}
			.btn-nav-signin {
				font-size: 14px;
				font-weight: 500;
				color: var(--mid);
				text-decoration: none;
				padding: 9px 12px;
				white-space: nowrap;
				transition: color 0.18s;
			}
			.btn-nav-signin:hover {
				color: var(--ink);
			}
			.btn-nav-signin:focus-visible {
				outline: 2px solid var(--teal);
				outline-offset: 3px;
				border-radius: 4px;
			}
			.btn-nav-outline {
				font-size: 14px;
				font-weight: 700;
				color: var(--signal-deep);
				background: transparent;
				text-decoration: none;
				padding: 9px 20px;
				border: 1.5px solid var(--teal);
				border-radius: 100px;
				transition:
					background 0.18s,
					color 0.18s;
				white-space: nowrap;
			}
			.btn-nav-outline:hover {
				background: var(--teal);
				color: var(--paper-1);
			}
			.btn-nav-outline:focus-visible {
				outline: 2px solid var(--teal);
				outline-offset: 2px;
			}

			/* LAYOUT */
			.docs-layout {
				display: grid;
				grid-template-columns: 260px 1fr 220px;
				min-height: calc(100vh - 68px);
				margin-top: 68px;
				align-items: start;
			}

			/* SIDEBAR */
			.docs-sidebar {
				position: sticky;
				top: 68px;
				height: calc(100vh - 68px);
				overflow-y: auto;
				border-right: 1px solid var(--rule-1);
				padding: 32px 0;
				background: var(--paper-0);
			}
			.docs-sidebar::-webkit-scrollbar {
				width: 4px;
			}
			.docs-sidebar::-webkit-scrollbar-track {
				background: transparent;
			}
			.docs-sidebar::-webkit-scrollbar-thumb {
				background: var(--rule-1);
				border-radius: 2px;
			}
			.sidebar-search {
				margin: 0 20px 28px;
				position: relative;
			}
			.sidebar-search input {
				width: 100%;
				background: var(--paper-1);
				border: 1px solid var(--rule-1);
				border-radius: 8px;
				padding: 9px 12px 9px 36px;
				font-family: var(--font);
				font-size: 13px;
				color: var(--ink-0);
				outline: none;
				transition: border-color 0.18s;
			}
			.sidebar-search input::placeholder {
				color: var(--ink-2);
			}
			.sidebar-search input:focus {
				border-color: var(--teal);
			}
			.sidebar-search-icon {
				position: absolute;
				left: 11px;
				top: 50%;
				transform: translateY(-50%);
				color: var(--ink-2);
				pointer-events: none;
			}
			.sidebar-section {
				margin-bottom: 28px;
			}
			.sidebar-section-label {
				font-family: var(--mono);
				font-size: 10px;
				letter-spacing: 0.14em;
				text-transform: uppercase;
				color: var(--ink-2);
				padding: 0 20px;
				margin-bottom: 6px;
			}
			.sidebar-link {
				display: flex;
				align-items: center;
				gap: 8px;
				padding: 7px 20px;
				font-size: 13px;
				font-weight: 500;
				color: var(--ink-2);
				text-decoration: none;
				transition:
					color 0.15s,
					background 0.15s;
				border-left: 2px solid transparent;
				margin-left: 0;
			}
			.sidebar-link:hover {
				color: var(--ink-0);
				background: var(--paper-1);
			}
			.sidebar-link.active {
				color: var(--signal-deep);
				border-left-color: var(--teal);
				background: rgba(13, 92, 82, 0.05);
				font-weight: 600;
			}
			.sidebar-link:focus-visible {
				outline: 2px solid var(--teal);
				outline-offset: -2px;
			}
			.sidebar-link-dot {
				width: 5px;
				height: 5px;
				border-radius: 50%;
				background: currentColor;
				flex-shrink: 0;
				opacity: 0.5;
			}

			/* MAIN CONTENT */
			.docs-content {
				padding: 48px 64px 120px;
				max-width: 820px;
			}
			.docs-breadcrumb {
				display: flex;
				align-items: center;
				gap: 8px;
				font-family: var(--mono);
				font-size: 11px;
				letter-spacing: 0.08em;
				color: var(--ink-2);
				margin-bottom: 32px;
			}
			.docs-breadcrumb a {
				color: var(--signal-deep);
				text-decoration: none;
				transition: color 0.18s;
			}
			.docs-breadcrumb a:hover {
				color: var(--teal-mid);
			}
			.docs-breadcrumb a:focus-visible {
				outline: 2px solid var(--teal);
				outline-offset: 2px;
				border-radius: 2px;
			}
			.docs-breadcrumb-sep {
				color: var(--ink-2);
			}

			/* PAGE HEADER */

			.docs-h1 {
				font-size: clamp(28px, 3.5vw, 42px);
				font-weight: 400;
				letter-spacing: -0.03em;
				color: var(--ink-0);
				line-height: 1.1;
				margin-bottom: 16px;
				font-family: var(--font-display);
			}
			.docs-h1 em {
				font-style: italic;
			}
			.docs-lead {
				font-size: 16px;
				line-height: 1.8;
				color: var(--ink-2);
				margin-bottom: 40px;
				max-width: 640px;
			}
			.docs-meta {
				display: flex;
				align-items: center;
				gap: 20px;
				padding: 16px 0;
				border-top: 1px solid var(--rule-1);
				border-bottom: 1px solid var(--rule-1);
				margin-bottom: 48px;
				flex-wrap: wrap;
			}
			.docs-meta-item {
				font-family: var(--mono);
				font-size: 11px;
				color: var(--ink-2);
				display: flex;
				align-items: center;
				gap: 6px;
			}
			.docs-meta-label {
				color: var(--ink-1);
			}

			/* BODY COPY */
			.docs-body h2 {
				font-size: 20px;
				font-weight: 400;
				letter-spacing: -0.02em;
				color: var(--ink-0);
				margin: 48px 0 16px;
	/* scroll-margin-top removed 2026-08-31: html now carries a global
	   scroll-padding-top, and the two ADD, putting every anchor 192px
	   below the nav instead of 96. */
				font-family: var(--font-display);
			}
			.docs-body h2:first-child {
				margin-top: 0;
			}
			.docs-body h3 {
				font-size: 15px;
				font-weight: 700;
				color: var(--ink-1);
				margin: 32px 0 12px;
	/* scroll-margin-top removed 2026-08-31: html now carries a global
	   scroll-padding-top, and the two ADD, putting every anchor 192px
	   below the nav instead of 96. */
			}
			.docs-body p {
				font-size: 15px;
				line-height: 1.85;
				color: var(--ink-2);
				margin-bottom: 20px;
			}
			.docs-body a {
				color: var(--signal-deep);
				text-decoration: none;
			}
			.docs-body a:hover {
				text-decoration: underline;
			}
			.docs-body strong {
				color: var(--ink-1);
				font-weight: 600;
			}
			.docs-body ul,
			.docs-body ol {
				margin: 0 0 20px 20px;
				display: flex;
				flex-direction: column;
				gap: 8px;
			}
			.docs-body li {
				font-size: 15px;
				line-height: 1.75;
				color: var(--ink-2);
			}

			/* CODE */
			.docs-body code {
				font-family: var(--mono);
				font-size: 13px;
				color: var(--signal-deep);
				background: rgba(13, 92, 82, 0.12);
				padding: 2px 6px;
				border-radius: 4px;
			}
			.docs-body pre {
				background: var(--paper-1);
				border: 1px solid var(--rule-1);
				border-radius: 10px;
				padding: 24px 28px;
				margin: 0 0 28px;
				overflow-x: auto;
			}
			.docs-body pre code {
				background: none;
				padding: 0;
				color: var(--ink-0);
				font-size: 13px;
				line-height: 1.7;
			}
			/* Prism's token colours are for dark grounds (1.6–2.4:1 here). Docs code
			   blocks sit on --paper-1, where these tokens measure 7.5:1 (--signal) to
			   17.7:1 (--ink-0); recheck if any of them change. */
			.docs-body pre > code.syntax-highlight .token.comment,
			.docs-body pre > code.syntax-highlight .token.prolog,
			.docs-body pre > code.syntax-highlight .token.doctype,
			.docs-body pre > code.syntax-highlight .token.cdata,
			.docs-body pre > code.syntax-highlight .token.punctuation,
			.docs-body pre > code.syntax-highlight .token.operator,
			.docs-body pre > code.syntax-highlight .token.entity,
			.docs-body pre > code.syntax-highlight .token.url {
				color: var(--ink-1);
			}
			.docs-body pre > code.syntax-highlight .token.keyword,
			.docs-body pre > code.syntax-highlight .token.atrule,
			.docs-body pre > code.syntax-highlight .token.attr-value {
				color: var(--signal);
				font-weight: 600;
			}
			.docs-body pre > code.syntax-highlight .token.function,
			.docs-body pre > code.syntax-highlight .token.class-name {
				color: var(--ink-0);
				font-weight: 600;
			}
			.docs-body pre > code.syntax-highlight .token.string,
			.docs-body pre > code.syntax-highlight .token.char,
			.docs-body pre > code.syntax-highlight .token.selector,
			.docs-body pre > code.syntax-highlight .token.attr-name,
			.docs-body pre > code.syntax-highlight .token.builtin,
			.docs-body pre > code.syntax-highlight .token.regex,
			.docs-body pre > code.syntax-highlight .token.variable {
				color: var(--signal-deep);
			}
			.docs-body pre > code.syntax-highlight .token.number,
			.docs-body pre > code.syntax-highlight .token.boolean,
			.docs-body pre > code.syntax-highlight .token.constant,
			.docs-body pre > code.syntax-highlight .token.symbol,
			.docs-body pre > code.syntax-highlight .token.property,
			.docs-body pre > code.syntax-highlight .token.tag,
			.docs-body pre > code.syntax-highlight .token.important {
				color: var(--ink-0);
			}

			/* CALLOUT BLOCKS */
			.callout {
				border-radius: 10px;
				padding: 20px 24px;
				margin: 0 0 28px;
				display: flex;
				gap: 14px;
				align-items: flex-start;
			}
			.callout-note {
				background: rgba(13, 92, 82, 0.1);
				border: 1px solid rgba(13, 92, 82, 0.25);
			}
			.callout-warn {
				background: rgba(255, 183, 0, 0.08);
				border: 1px solid rgba(255, 183, 0, 0.2);
			}

			.callout-body {
				font-size: 14px;
				line-height: 1.7;
				color: var(--ink-1);
			}
			.callout-body strong {
				color: var(--ink-1);
			}

			/* STEP LIST */

			.step {
				display: flex;
				gap: 20px;
				padding: 24px 0;
				border-bottom: 1px solid var(--rule-1);
			}
			.step:last-child {
				border-bottom: none;
			}
			.step-num {
				width: 28px;
				height: 28px;
				border-radius: 50%;
				background: rgba(13, 92, 82, 0.15);
				border: 1px solid rgba(13, 92, 82, 0.3);
				color: var(--signal-deep);
				font-family: var(--mono);
				font-size: 12px;
				font-weight: 600;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-shrink: 0;
				margin-top: 2px;
			}

			/* ON-PAGE NAV (TOC) */
			.docs-toc {
				position: sticky;
				top: 96px;
				align-self: start;
				padding: 32px 24px 0;
				border-left: 1px solid var(--rule-1);
				min-height: 100px;
			}
			.docs-toc-label {
				font-family: var(--mono);
				font-size: 10px;
				letter-spacing: 0.14em;
				text-transform: uppercase;
				color: var(--ink-2);
				margin-bottom: 12px;
			}
			.docs-toc-link {
				display: block;
				font-size: 12px;
				color: var(--ink-2);
				text-decoration: none;
				padding: 5px 0;
				border-left: 1.5px solid var(--rule-1);
				padding-left: 12px;
				transition:
					color 0.15s,
					border-color 0.15s;
				line-height: 1.4;
			}
			.docs-toc-link:hover {
				color: var(--ink-0);
			}
			.docs-toc-link.active {
				color: var(--signal-deep);
				border-left-color: var(--teal);
			}
			.docs-toc-link:focus-visible {
				outline: 2px solid var(--teal);
				outline-offset: 2px;
				border-radius: 2px;
			}

			/* CONTENT + TOC WRAPPER */

			/* CONTENT PLACEHOLDER */

			/* PAGE NAV (prev/next) */
			.docs-page-nav {
				display: flex;
				justify-content: space-between;
				gap: 16px;
				padding-top: 48px;
				border-top: 1px solid var(--rule-1);
				margin-top: 64px;
				flex-wrap: wrap;
			}
			.docs-page-nav-item {
				display: flex;
				flex-direction: column;
				gap: 4px;
				text-decoration: none;
				padding: 16px 20px;
				border: 1px solid var(--rule-1);
				border-radius: 10px;
				flex: 1;
				min-width: 160px;
				transition:
					border-color 0.18s,
					background 0.18s;
			}
			.docs-page-nav-item:hover {
				border-color: rgba(13, 92, 82, 0.4);
				background: rgba(13, 92, 82, 0.06);
			}
			.docs-page-nav-item:focus-visible {
				outline: 2px solid var(--teal);
				outline-offset: 3px;
				border-radius: 10px;
			}
			.docs-page-nav-dir {
				font-family: var(--mono);
				font-size: 10px;
				letter-spacing: 0.12em;
				text-transform: uppercase;
				color: var(--ink-2);
			}
			.docs-page-nav-title {
				font-size: 14px;
				font-weight: 600;
				color: var(--ink-1);
			}
			.docs-page-nav-item.next {
				text-align: right;
			}

			/* FOOTER */
			/* The shared footer CTA ships from marketing-shell.css coloured for the
			   light shell. Docs is dark but has no class, so it needs
			   its own text colour or the headline renders dark-on-dark. */
			/* var(--teal) is #087a6b, ~3.9:1 on this ground — under AA for 15px text.
			   var(--signal) is the brighter accent dark surfaces already use elsewhere
			   (--ag-bright, components.css), and lands at ~9:1 here. */

			/* Ground and border only. This rule used to also carry
			   `display:flex; justify-content:space-between; align-items:center`,
			   written when the footer was FLAT and .footer-logo/.footer-links/
			   .footer-copy were its direct children. They have since been wrapped in
			   .footer-inner and .footer-legal, and the shared CTA added a third
			   wrapper, so on every /docs/ page above 900px those three wrappers
			   became side-by-side flex items — each already carrying
			   `max-width:1100px; margin:0 auto` from marketing-shell — and the footer
			   rendered as squashed columns instead of stacked rows. Desktop only: the
			   mobile block below used to set flex-direction:column, which is why a
			   phone check never showed it. Let the shared .footer-inner/.footer-legal
			   layout do the work. */
			footer {
				border-top: 1px solid var(--rule-1);
				background: var(--paper-0);
			}
			.footer-logo {
				font-size: 15px;
				font-weight: 800;
				letter-spacing: -0.03em;
				color: var(--ink-1);
				text-decoration: none;
			}
			.footer-logo-img {
				height: 22px;
				width: auto;
				display: block;
			}
			.footer-links {
				display: flex;
				gap: 24px;
				list-style: none;
				flex-wrap: wrap;
			}
			.footer-links a {
				font-size: 13px;
				color: var(--ink-1);
				text-decoration: none;
				transition: color 0.18s;
			}
			.footer-links a:hover {
				color: var(--ink-1);
			}
			.footer-links a:focus-visible {
				outline: 2px solid var(--teal);
				outline-offset: 2px;
				border-radius: 2px;
			}
			.footer-copy {
				font-family: var(--mono);
				font-size: 11px;
				color: var(--ink-1);
			}

			/* RESPONSIVE */
			@media (min-width: 1101px) {
				.nav-hamburger,
				.nav-drawer,
				.nav-overlay {
					display: none !important;
				}
			}
			@media (max-width: 1100px) {
				nav.main-nav {
					padding: 0 20px;
				}
				.nav-links {
					display: none;
				}
				/* docs.css loads after marketing-shell.css and carried its own copy
				   of `.nav-right { display: none }`, so the shell's fix for the
				   missing mobile CTA was silently overridden on every docs page.
				   Keep the two files in step: hide only what the drawer repeats. */
				.nav-right {
					display: flex;
					gap: 10px;
					margin-left: auto;
					margin-right: 4px;
				}
				.nav-right .btn-nav-signin,
				.nav-right .btn-nav-outline {
					display: none;
				}
				.docs-layout {
					/* minmax(0,1fr), not 1fr: `1fr` is minmax(auto,1fr), and the
					   auto minimum keeps the track at the content's min-content
					   width — 652px inside a 390px viewport here. */
					grid-template-columns: minmax(0, 1fr);
					margin-top: 68px;
				}
				.docs-sidebar {
					display: none;
				}
				.docs-toc {
					display: none;
				}
				.docs-content {
					padding: 32px 24px 80px;
				}
				/* The footer is no longer a flex container here (see the FOOTER block
				   above), so flex-direction/align-items/gap had nothing to act on.
				   .footer-inner and .footer-legal bring their own responsive padding. */

				.nav-hamburger {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					gap: 5px;
					width: 40px;
					height: 40px;
					background: none;
					border: none;
					cursor: pointer;
					padding: 0;
					border-radius: 6px;
					flex-shrink: 0;
				}
				.nav-hamburger span {
					display: block;
					width: 22px;
					height: 2px;
					background: var(--paper-1);
					border-radius: 2px;
					transition:
						transform 0.25s ease,
						opacity 0.25s ease;
				}
				.nav-hamburger[aria-expanded='true'] span:nth-child(1) {
					transform: translateY(7px) rotate(45deg);
				}
				.nav-hamburger[aria-expanded='true'] span:nth-child(2) {
					opacity: 0;
					transform: scaleX(0);
				}
				.nav-hamburger[aria-expanded='true'] span:nth-child(3) {
					transform: translateY(-7px) rotate(-45deg);
				}
				.nav-hamburger:focus-visible {
					outline: 2px solid var(--teal);
					outline-offset: 3px;
					border-radius: 6px;
				}
				.nav-drawer {
					display: none;
					position: fixed;
					top: 68px;
					left: 0;
					right: 0;
					z-index: 99;
					background: var(--paper-1);
					border-bottom: 1px solid var(--rule-1);
					padding: 8px 0 20px;
					transform-origin: top;
					animation: drawerIn 0.22s ease forwards;
				}
				.nav-drawer.is-open {
					display: block;
				}
				.nav-overlay {
					display: none;
					position: fixed;
					inset: 68px 0 0 0;
					z-index: 98;
					background: rgba(0, 0, 0, 0.5);
				}
				.nav-overlay.is-open {
					display: block;
				}
				@keyframes drawerIn {
					from {
						opacity: 0;
						transform: scaleY(0.95);
					}
					to {
						opacity: 1;
						transform: scaleY(1);
					}
				}
				.drawer-link {
					display: block;
					padding: 13px 24px;
					font-size: 15px;
					font-weight: 500;
					color: var(--ink-2);
					text-decoration: none;
					transition:
						color 0.15s,
						background 0.15s;
				}
				.drawer-link:hover {
					color: var(--ink-0);
					background: var(--paper-1);
				}
				.drawer-link:focus-visible {
					outline: 2px solid var(--teal);
					outline-offset: -2px;
				}
				.drawer-divider {
					height: 1px;
					background: var(--rule-1);
					margin: 8px 0;
				}
				.drawer-actions {
					padding: 12px 24px 0;
					display: flex;
					flex-direction: column;
					gap: 10px;
				}

				.drawer-demo {
					display: block;
					text-align: center;
					background: var(--teal);
					color: var(--paper-1);
					font-size: 15px;
					font-weight: 700;
					border-radius: 100px;
					padding: 13px 24px;
					text-decoration: none;
					transition: background 0.18s;
				}
				.drawer-demo:hover {
					background: var(--teal-mid);
				}
				.drawer-demo:focus-visible {
					outline: 2px solid var(--teal);
					outline-offset: 3px;
					border-radius: 100px;
				}
				.drawer-signin {
					display: block;
					text-align: center;
					font-size: 14px;
					font-weight: 600;
					color: var(--mid);
					text-decoration: none;
					padding: 10px 16px;
					transition: color 0.18s;
				}
				.drawer-signin:hover {
					color: var(--ink);
				}
				.drawer-demo-outline {
					display: block;
					text-align: center;
					background: transparent;
					color: var(--signal-deep);
					font-size: 15px;
					font-weight: 700;
					border: 1.5px solid var(--teal);
					border-radius: 100px;
					padding: 11px 24px;
					text-decoration: none;
					transition:
						background 0.18s,
						color 0.18s;
				}
				.drawer-demo-outline:hover {
					background: var(--teal);
					color: var(--paper-1);
				}
			}
			/* ── Narrow-viewport overflow ──────────────────────────────────
			   A grid item's automatic minimum size is its content's min-content
			   width, so a wide <table> or an unwrappable <pre> line made the
			   single .docs-layout track 652px wide inside a 390px viewport.
			   body has overflow-x:hidden, so nothing scrolled — the right-hand
			   side of every affected doc was simply unreachable.

			   Give the two offenders their own scroll box; the track can then
			   collapse to the viewport. */
			.docs-content { min-width: 0; }
			.docs-body table {
				display: block;
				width: max-content;
				max-width: 100%;
				overflow-x: auto;
				-webkit-overflow-scrolling: touch;
			}
			.docs-body pre {
				max-width: 100%;
				overflow-x: auto;
				-webkit-overflow-scrolling: touch;
			}

			@media (max-width: 560px) {
				.nav-right .nav-search-btn { display: none; }
				.btn-nav-solid { font-size: 13px; padding: 8px 16px; }
				nav.main-nav { padding: 0 14px; }
			}

/* ═══════════════════════════════════════════════════════════════════════════
   Docs content blocks — added for the generated /docs collection.
   (Everything above is the original scaffold: chrome + base typography.)
   These style what the exported Learn articles actually emit.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Tables (Markdown GFM) */
.docs-body table {
	width: 100%;
	margin: 0 0 28px;
	border-collapse: collapse;
	font-size: 14px;
}
.docs-body th,
.docs-body td {
	padding: 10px 14px;
	border-bottom: 1px solid var(--rule-1);
	text-align: left;
	vertical-align: top;
	line-height: 1.6;
}
.docs-body th {
	color: var(--ink-0);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	background: var(--paper-1);
}
.docs-body td {
	color: var(--ink-2);
}
.docs-body td code {
	white-space: nowrap;
}

/* Inline + block extras */
.docs-body kbd {
	font-family: var(--mono);
	font-size: 12px;
	color: var(--ink-0);
	background: var(--paper-1);
	border: 1px solid var(--rule-1);
	border-radius: 5px;
	padding: 2px 7px;
}
.docs-body blockquote {
	margin: 0 0 28px;
	padding: 4px 20px;
	border-left: 3px solid var(--teal);
	color: var(--ink-2);
}
.docs-body hr {
	border: none;
	border-top: 1px solid var(--rule-1);
	margin: 40px 0;
}
.docs-body img {
	max-width: 100%;
	border-radius: 10px;
	border: 1px solid var(--rule-1);
}

/* Callouts — note + warn are defined above; add tip + info, and tidy the body. */
.callout-tip {
	background: rgba(13, 92, 82, 0.1);
	border: 1px solid rgba(13, 92, 82, 0.25);
}
.callout-info {
	background: rgba(91, 141, 239, 0.08);
	border: 1px solid rgba(91, 141, 239, 0.22);
}

.callout-body p {
	margin: 0 0 10px;
	font-size: 14px;
	line-height: 1.7;
	/* .docs-body p sets --ink-2, the MUTED floor, and wins here on source order.
	   That is 4.45:1 on the callout's tinted ground. A callout is emphasis, not
	   an aside; its text should be at least as readable as the prose around it. */
	color: var(--ink-1);
}
.callout-body p:last-child {
	margin-bottom: 0;
}
.callout-body p:first-child strong {
	color: var(--ink-0);
}
.callout-body ul,
.callout-body ol {
	margin: 8px 0 8px 18px;
}
.callout-body code {
	white-space: nowrap;
}

/* Try-it — inline pill that links into the app (mirrors .btn-nav-outline). */
.try-it {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 13px;
	font-weight: 700;
	color: var(--signal-deep);
	background: transparent;
	border: 1.5px solid var(--teal);
	border-radius: 100px;
	padding: 5px 14px;
	margin: 2px 0;
	text-decoration: none;
	white-space: nowrap;
	transition:
		background 0.18s,
		color 0.18s;
}
.try-it:hover {
	background: var(--teal);
	color: var(--paper-1);
	text-decoration: none;
}
.try-it-arrow {
	font-family: var(--mono);
}

/* Next-steps — card grid that closes each article. */
.next-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 12px;
	margin: 8px 0 28px;
}
.next-steps-card {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px 40px 16px 18px;
	background: var(--paper-1);
	border: 1px solid var(--rule-1);
	border-radius: 12px;
	text-decoration: none;
	position: relative;
	transition:
		border-color 0.18s,
		transform 0.18s;
}
.next-steps-card:hover {
	border-color: var(--teal);
	transform: translateY(-2px);
	text-decoration: none;
}
.next-steps-title {
	font-size: 14px;
	font-weight: 700;
	color: var(--ink-0);
}
.next-steps-desc {
	font-size: 13px;
	line-height: 1.5;
	color: var(--ink-2);
}
.next-steps-arrow {
	position: absolute;
	top: 14px;
	right: 16px;
	color: var(--signal-deep);
	font-family: var(--mono);
	opacity: 0.6;
}

/* Docs landing — category card grid (drops the TOC column). */
.docs-layout-index {
	grid-template-columns: 260px minmax(0, 1fr);
}
.docs-index-content {
	max-width: none;
}
.doc-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 16px;
	margin-top: 32px;
}
.doc-card {
	padding: 24px;
	background: var(--paper-1);
	border: 1px solid var(--rule-1);
	border-radius: 14px;
	border-top: 2px solid var(--accent, var(--teal));
}
.doc-card-title {
	font-size: 16px;
	font-weight: 700;
	color: var(--ink-0);
	margin: 0 0 6px;
}
.doc-card-desc {
	font-size: 13px;
	color: var(--ink-2);
	margin: 0 0 14px;
	line-height: 1.55;
}
.doc-card-list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.doc-card-list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 6px 8px;
	margin: 0 -8px;
	border-radius: 7px;
	font-size: 13.5px;
	color: var(--ink-0);
	text-decoration: none;
	transition:
		background 0.15s,
		color 0.15s;
}
.doc-card-list a:hover {
	background: rgba(13, 92, 82, 0.12);
	color: var(--signal-deep);
}
.doc-card-time {
	font-family: var(--mono);
	font-size: 11px;
	color: var(--ink-2);
	flex-shrink: 0;
}

@media (max-width: 900px) {
	.docs-layout-index {
		grid-template-columns: 1fr;
	}
}

/* Inline <code> in prose carries unbreakable identifiers like
   pg_replication_slots.confirmed_flush_lsn, which overflow the paragraph with
   no scroll container to catch them. Let them break; <pre> keeps white-space:pre
   so this does not affect code blocks. */
:not(pre) > code { overflow-wrap: anywhere; }