/**
 * Documentação pública da DROPE WhatsApp API (/whatsapp-api/documentacao/).
 *
 * Direção completa em docs/DIRECAO-DOCS.md. Resumo:
 *
 * - ESCURO, como a página do produto (/whatsapp-api/): mesmo fundo #04100c,
 *   mesmo verde, mesma Figtree, raios 20/13. A leitura longa fica confortável
 *   com corpo em #c3d1cc (12:1), 16 px e altura de linha 1,7.
 * - PAPÉIS DAS CORES: laranja DROPE = ação (botão com fundo #c84e00 e texto
 *   branco, 4,6:1) e "obrigatório"; verde = estado e navegação (ativo, link,
 *   foco, sucesso). Um nunca faz o papel do outro.
 * - NADA CORTA: nome, caminho, chave e código quebram (overflow-wrap:
 *   anywhere) ou rolam dentro do próprio bloco. Nenhum text-overflow aqui.
 * - SEM SOMBRA: profundidade por fio de 1 px, camada de fundo e brilho radial.
 * - ESPAÇAMENTO 4/8: 4, 8, 12, 16, 24, 32, 40, 48, 64, 96.
 *
 * POR QUE TUDO COMEÇA COM #wdd
 *
 * A página carrega o reset do tema Hello e o kit do Elementor. O reset pinta
 * `[type=button]:hover/:focus` de rosa (0,2,0) e o kit colore `a` (0,1,1).
 * Com a raiz por id, todo componente daqui vale mais que qualquer regra
 * genérica de fora, sem !important e sem corrida de ordem de carregamento.
 */

/* ============================================================
 * Página
 * ============================================================ */

body.wdd-page {
	margin: 0;
	background: #04100c;
}

/*
 * Sem scroll-padding no html: com ele, focar um botão da barra fixa do topo
 * fazia o Chrome rolar a página para "mostrar" o botão. O respiro das
 * âncoras vem do scroll-margin de cada alvo (logo abaixo).
 */
html:has(body.wdd-page) { background: #04100c; }

@media (prefers-reduced-motion: no-preference) {
	html:has(body.wdd-page) { scroll-behavior: smooth; }
}

#wdd {
	--bg: #04100c;
	--s1: #071612;
	--s2: #0b1d18;
	--s3: #10251f;
	--code: #050d0b;
	--code-bar: #08140f;

	--line: rgba(255, 255, 255, .08);
	--line-2: rgba(255, 255, 255, .14);

	--t1: #eef5f2;
	--t2: #c3d1cc;
	--t3: #8fa49d;

	--green: #25d366;
	--green-2: #00e5a0;
	--green-t: #4ee59a;
	--green-tint: rgba(37, 211, 102, .1);

	--orange: #ff7e01;
	--orange-btn: #c84e00;
	--orange-btn-h: #b04400;
	--orange-t: #ffa04d;

	--amber: #f5c451;
	--red: #ff8a8a;
	--blue: #8ecbff;

	--r-lg: 20px;
	--r: 13px;
	--r-sm: 8px;

	--top: 64px;
	--side: 288px;
	--pad: 48px;

	--sans: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	position: relative;
	min-height: 100vh;
	background: var(--bg);
	color: var(--t2);
	font-family: var(--sans);
	font-size: 16px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

#wdd *,
#wdd *::before,
#wdd *::after { box-sizing: border-box; }

#wdd [hidden] { display: none !important; }

#wdd [id] { scroll-margin-top: calc(var(--top) + 16px); }

/* Reset local: o tema e o Elementor não decidem nada aqui dentro. */
#wdd :where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, pre, blockquote) { margin: 0; }
#wdd :where(ul, ol) { padding: 0; list-style: none; }
#wdd :where(h1, h2, h3, h4, h5, h6) {
	color: var(--t1);
	font-family: var(--sans);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -.01em;
}
#wdd img { max-width: 100%; height: auto; border: 0; }
#wdd svg { overflow: visible; }

#wdd button,
#wdd [type='button'] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: inherit;
	font: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	text-align: inherit;
	text-transform: none;
	white-space: normal;
	cursor: pointer;
	user-select: none;
	transition: none;
	-webkit-appearance: none;
	appearance: none;
}

#wdd button:hover,
#wdd button:focus,
#wdd [type='button']:hover,
#wdd [type='button']:focus {
	background-color: transparent;
	color: inherit;
}

#wdd a {
	color: var(--green-t);
	text-decoration: underline;
	text-decoration-color: rgba(78, 229, 154, .4);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color .15s ease, text-decoration-color .15s ease;
}

#wdd a:hover {
	color: #7ff0b8;
	text-decoration-color: currentColor;
}

#wdd :focus { outline: none; }

#wdd :focus-visible {
	outline: 2px solid var(--green-2);
	outline-offset: 2px;
	border-radius: 6px;
}

#wdd code,
#wdd kbd,
#wdd pre {
	font-family: var(--mono);
}

/* Código em linha. Quebra onde precisar: um JID longo nunca vaza da linha. */
#wdd :not(pre) > code {
	padding: .12em .42em;
	border: 1px solid var(--line);
	border-radius: 6px;
	background: rgba(255, 255, 255, .055);
	color: var(--t1);
	font-size: .86em;
	font-weight: 500;
	overflow-wrap: anywhere;
	word-break: normal;
}

#wdd strong { color: var(--t1); font-weight: 700; }

#wdd .wdd-i {
	width: 1.15em;
	height: 1.15em;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

#wdd .wdd-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

#wdd .wdd-skip {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 200;
	padding: 10px 16px;
	border-radius: var(--r-sm);
	background: var(--orange-btn);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	transform: translateY(-160%);
}

#wdd .wdd-skip:focus { transform: none; }

#wdd .wdd-kbd {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border: 1px solid var(--line-2);
	border-radius: 6px;
	background: rgba(255, 255, 255, .04);
	color: var(--t3);
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
}

#wdd .wdd-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 20px;
	padding: 0 7px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .07);
	color: var(--t3);
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0;
	font-variant-numeric: tabular-nums;
}

/* ============================================================
 * Botões
 * ============================================================ */

#wdd .wdd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 20px;
	border: 1px solid transparent;
	border-radius: 999px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}

#wdd .wdd-btn .wdd-i { width: 18px; height: 18px; }

#wdd .wdd-btn--primary,
#wdd .wdd-btn--primary:visited {
	background: var(--orange-btn);
	border-color: rgba(255, 255, 255, .1);
	color: #fff;
}

#wdd .wdd-btn--primary:hover,
#wdd .wdd-btn--primary:focus-visible {
	background: var(--orange-btn-h);
	color: #fff;
}

#wdd .wdd-btn--primary:hover .wdd-i { transform: translateX(2px); }
#wdd .wdd-btn--primary .wdd-i { transition: transform .15s ease; }

#wdd .wdd-btn--ghost,
#wdd .wdd-btn--ghost:visited {
	border-color: var(--line-2);
	background: rgba(255, 255, 255, .03);
	color: var(--t1);
}

#wdd .wdd-btn--ghost:hover,
#wdd .wdd-btn--ghost:focus-visible {
	border-color: rgba(37, 211, 102, .55);
	background: var(--green-tint);
	color: #fff;
}

#wdd .wdd-btn--lg {
	min-height: 52px;
	padding: 0 24px;
	font-size: 16px;
}

#wdd .wdd-btn--block { display: flex; width: 100%; }

#wdd .wdd-iconbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex: none;
	border-radius: 999px;
	color: var(--t2);
	transition: background-color .15s ease, color .15s ease;
}

#wdd .wdd-iconbtn:hover,
#wdd .wdd-iconbtn:focus-visible {
	background-color: rgba(255, 255, 255, .07);
	color: #fff;
}

#wdd .wdd-iconbtn .wdd-i { width: 20px; height: 20px; }

/* ============================================================
 * Barra do topo
 * ============================================================ */

#wdd .wdd-top {
	position: sticky;
	top: 0;
	z-index: 60;
	height: var(--top);
	border-bottom: 1px solid var(--line);
	background: rgba(4, 16, 12, .86);
	-webkit-backdrop-filter: saturate(140%) blur(14px);
	backdrop-filter: saturate(140%) blur(14px);
}

#wdd .wdd-top-in {
	display: flex;
	align-items: center;
	gap: 24px;
	height: 100%;
	padding: 0 24px;
}

#wdd .wdd-brand {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	flex: none;
	min-height: 40px;
	color: var(--t1);
	text-decoration: none;
}

#wdd .wdd-brand-logo {
	display: block;
	width: auto;
	height: 26px;
}

#wdd .wdd-brand-sep {
	width: 1px;
	height: 20px;
	background: var(--line-2);
}

#wdd .wdd-brand-name {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--t1);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -.01em;
	white-space: nowrap;
}

#wdd .wdd-brand-docs {
	display: inline-flex;
	align-items: center;
	height: 22px;
	padding: 0 8px;
	border: 1px solid rgba(37, 211, 102, .35);
	border-radius: 999px;
	background: var(--green-tint);
	color: var(--green-t);
	font-size: 12px;
	font-weight: 700;
}

#wdd .wdd-top-nav {
	display: none;
	align-items: center;
	gap: 4px;
	margin-left: 8px;
}

#wdd .wdd-top-nav a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 12px;
	border-radius: 999px;
	color: var(--t3);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	transition: color .15s ease, background-color .15s ease;
}

#wdd .wdd-top-nav a:hover { color: var(--t1); background: rgba(255, 255, 255, .05); }
#wdd .wdd-top-nav a[aria-current='true'] { color: var(--t1); background: rgba(255, 255, 255, .07); }

#wdd .wdd-top-act {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
}

#wdd .wdd-searchbtn {
	gap: 10px;
	height: 40px;
	padding: 0 8px 0 14px;
	border: 1px solid var(--line-2);
	border-radius: 999px;
	background: rgba(255, 255, 255, .03);
	color: var(--t3);
	font-size: 14px;
	transition: border-color .15s ease, color .15s ease;
}

#wdd .wdd-searchbtn:hover,
#wdd .wdd-searchbtn:focus-visible {
	border-color: rgba(37, 211, 102, .5);
	background-color: rgba(255, 255, 255, .03);
	color: var(--t1);
}

#wdd .wdd-searchbtn-i { width: 17px; height: 17px; }
#wdd .wdd-searchbtn-t { min-width: 64px; }

#wdd .wdd-top-product { display: none; }
#wdd .wdd-top-panel { min-height: 40px; padding: 0 18px; font-size: 14px; }

@media (min-width: 1100px) {
	#wdd .wdd-top-nav { display: flex; }
}

@media (min-width: 1360px) {
	#wdd .wdd-top-product { display: inline-flex; min-height: 40px; padding: 0 18px; font-size: 14px; }
}

@media (min-width: 1024px) {
	#wdd .wdd-menubtn { display: none; }
}

@media (max-width: 1023px) {
	#wdd .wdd-top-in { gap: 12px; padding: 0 16px; }
	#wdd .wdd-searchbtn { width: 40px; padding: 0; justify-content: center; }
	#wdd .wdd-searchbtn-t,
	#wdd .wdd-searchbtn .wdd-kbd { display: none; }
}

@media (max-width: 599px) {
	#wdd .wdd-top-panel { display: none; }
	#wdd .wdd-brand { gap: 10px; }
	#wdd .wdd-brand-logo { height: 22px; }
}

@media (max-width: 419px) {
	#wdd .wdd-brand-name-t { display: none; }
}

/* ============================================================
 * Abertura (hero)
 * ============================================================ */

#wdd .wdd-hero {
	position: relative;
	overflow: hidden;
	border-bottom: 1px solid var(--line);
	background:
		radial-gradient(60% 70% at 85% 0%, rgba(37, 211, 102, .16), transparent 70%),
		radial-gradient(45% 60% at 0% 100%, rgba(0, 229, 160, .07), transparent 70%),
		var(--bg);
}

/* Grade fina ao fundo, que some nas bordas: dá textura sem competir. */
#wdd .wdd-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
	background-size: 48px 48px;
	-webkit-mask-image: radial-gradient(70% 80% at 60% 30%, #000, transparent 75%);
	mask-image: radial-gradient(70% 80% at 60% 30%, #000, transparent 75%);
	pointer-events: none;
}

#wdd .wdd-hero-in {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 48px;
	padding: 48px var(--pad) 64px;
}

/*
 * A abertura usa a mesma grade do corpo: começa onde o texto das seções
 * começa (depois da lateral) e termina na mesma margem direita.
 */
@media (min-width: 768px) {
	#wdd .wdd-hero-in { padding: 64px var(--pad) 72px; }
}

@media (min-width: 1024px) {
	#wdd .wdd-hero-in { padding-left: calc(var(--side) + var(--pad)); }
	#wdd .wdd-hero-vis { max-width: 640px; }
}

/* Lado a lado só quando o texto tem espaço; a abertura ocupa a primeira tela inteira. */
@media (min-width: 1360px) {
	#wdd .wdd-hero-in {
		grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
		align-items: center;
		align-content: center;
		gap: 48px;
		min-height: min(calc(100vh - var(--top)), 880px);
		padding-top: 48px;
		padding-bottom: 56px;
	}
}

#wdd .wdd-pill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 32px;
	padding: 4px 14px;
	border: 1px solid rgba(37, 211, 102, .3);
	border-radius: 999px;
	background: rgba(37, 211, 102, .07);
	color: var(--green-t);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .01em;
}

#wdd .wdd-pill-sep {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: currentColor;
	opacity: .5;
}

#wdd .wdd-pulse {
	position: relative;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--green);
}

#wdd .wdd-h1 {
	margin-top: 24px;
	color: #fff;
	font-size: clamp(34px, 3.4vw, 48px);
	font-weight: 800;
	line-height: 1.04;
	letter-spacing: -.035em;
	text-wrap: balance;
}

#wdd .wdd-grad { color: var(--green); }

#wdd .wdd-hero-lead {
	max-width: 560px;
	margin-top: 20px;
	color: var(--t2);
	font-size: 18px;
	line-height: 1.6;
}

#wdd .wdd-hero-steps {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 12px;
	max-width: 620px;
	margin-top: 32px;
	counter-reset: none;
}

@media (min-width: 600px) {
	#wdd .wdd-hero-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

#wdd .wdd-hero-steps li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px;
	border: 1px solid var(--line);
	border-radius: var(--r);
	background: rgba(255, 255, 255, .025);
}

#wdd .wdd-hero-n {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	flex: none;
	border-radius: 50%;
	background: var(--green-tint);
	color: var(--green-t);
	font-size: 13px;
	font-weight: 700;
}

#wdd .wdd-hero-steps strong {
	display: block;
	color: var(--t1);
	font-size: 16px;
	line-height: 1.3;
}

#wdd .wdd-hero-steps small {
	display: block;
	margin-top: 2px;
	color: var(--t3);
	font-size: 13px;
	line-height: 1.4;
}

#wdd .wdd-hero-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 32px;
}

#wdd .wdd-base {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 4px 12px;
	max-width: 620px;
	margin-top: 24px;
	padding: 6px 6px 6px 16px;
	border: 1px solid var(--line);
	border-radius: var(--r);
	background: rgba(5, 13, 11, .7);
}

#wdd .wdd-base-k {
	flex: none;
	color: var(--t3);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

#wdd .wdd-base-v {
	flex: 1;
	min-width: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--t1);
	font-size: 13px;
	line-height: 1.5;
	overflow-wrap: normal;
}

/* Tela estreita: o rótulo sobe e a URL quebra só depois de uma barra (<wbr>). */
@media (max-width: 479px) {
	#wdd .wdd-base {
		grid-template-columns: minmax(0, 1fr) auto;
		padding-top: 10px;
	}

	#wdd .wdd-base-k { grid-column: 1 / -1; }
}

/* Janela de código + balão */

#wdd .wdd-hero-vis {
	position: relative;
	min-width: 0;
}

#wdd .wdd-win { border-radius: var(--r-lg); }

#wdd .wdd-win-bar { padding-left: 16px; }

#wdd .wdd-win-dots {
	display: inline-flex;
	gap: 6px;
	flex: none;
}

#wdd .wdd-win-dots i {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .14);
}

#wdd .wdd-win-title {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: 1;
	min-width: 0;
	margin-left: 8px;
	color: var(--t2);
	font-family: var(--mono);
	font-size: 13px;
	font-weight: 500;
}

#wdd .wdd-win-pre { padding: 20px; font-size: 13px; }

#wdd .wdd-win-res {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	border-top: 1px solid var(--line);
	background: var(--code-bar);
	font-size: 13px;
}

#wdd .wdd-win-res code {
	padding: 0;
	border: 0;
	background: none;
	color: var(--t2);
	font-size: 13px;
}

#wdd .wdd-win-ms {
	margin-left: auto;
	color: var(--green-t);
	font-size: 13px;
	font-weight: 600;
}

#wdd .wdd-chat {
	width: min(300px, 100%);
	margin: 16px 0 0 auto;
	position: relative;
	overflow: hidden;
	border: 1px solid var(--line-2);
	border-radius: var(--r-lg);
	background: #0b141a;
}

#wdd .wdd-chat-head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	background: #1f2c33;
}

#wdd .wdd-chat-av {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #2a3942;
	color: #aebac1;
}

#wdd .wdd-chat-av .wdd-i { width: 18px; height: 18px; }

#wdd .wdd-chat-who strong {
	display: block;
	color: #e9edef;
	font-size: 14px;
	line-height: 1.2;
}

#wdd .wdd-chat-who small {
	display: block;
	color: var(--green);
	font-size: 12px;
	line-height: 1.3;
}

#wdd .wdd-chat-body {
	padding: 16px 14px 18px;
	background:
		radial-gradient(circle at 20% 30%, rgba(255, 255, 255, .025) 0 1px, transparent 1.5px) 0 0 / 18px 18px,
		#0b141a;
}

#wdd .wdd-bubble {
	position: relative;
	max-width: 92%;
	margin-left: auto;
	padding: 8px 10px 6px 12px;
	border-radius: 10px 2px 10px 10px;
	background: #005c4b;
	color: #e9edef;
	font-size: 14px;
	line-height: 1.45;
	overflow-wrap: anywhere;
}

#wdd .wdd-bubble-m {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 4px;
	margin-top: 2px;
	color: rgba(233, 237, 239, .62);
	font-size: 12px;
}

#wdd .wdd-bubble-m .wdd-i {
	width: 16px;
	height: 16px;
	color: #53bdeb;
	stroke-width: 2;
}

/* Entrada: a chamada aparece linha a linha, depois a resposta, depois o balão. */
@media (prefers-reduced-motion: no-preference) {
	#wdd .wdd-win-pre .wdd-ln { animation: wdd-ln .35s ease both; }
	#wdd .wdd-win-pre .wdd-ln:nth-child(1) { animation-delay: .15s; }
	#wdd .wdd-win-pre .wdd-ln:nth-child(2) { animation-delay: .3s; }
	#wdd .wdd-win-pre .wdd-ln:nth-child(3) { animation-delay: .45s; }
	#wdd .wdd-win-pre .wdd-ln:nth-child(4) { animation-delay: .6s; }
	#wdd .wdd-win-pre .wdd-ln:nth-child(5) { animation-delay: .75s; }
	#wdd .wdd-win-pre .wdd-ln:nth-child(6) { animation-delay: .9s; }
	#wdd .wdd-win-pre .wdd-ln:nth-child(7) { animation-delay: 1.05s; }
	#wdd .wdd-win-pre .wdd-ln:nth-child(8) { animation-delay: 1.2s; }
	#wdd .wdd-win-pre .wdd-ln:nth-child(9) { animation-delay: 1.35s; }
	#wdd .wdd-win-pre .wdd-ln:nth-child(n+10) { animation-delay: 1.5s; }
	#wdd .wdd-win-res { animation: wdd-fade .4s ease 1.8s both; }
	#wdd .wdd-chat { animation: wdd-rise .5s cubic-bezier(.2, .8, .2, 1) 2.1s both; }
	#wdd .wdd-bubble { animation: wdd-pop .4s cubic-bezier(.2, .8, .2, 1) 2.45s both; }
	#wdd .wdd-pulse::after {
		content: '';
		position: absolute;
		inset: -4px;
		border-radius: 50%;
		border: 1px solid var(--green);
		animation: wdd-ping 2s ease-out infinite;
	}
}

@keyframes wdd-ln { from { opacity: 0; } to { opacity: 1; } }
@keyframes wdd-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes wdd-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes wdd-pop { from { opacity: 0; transform: scale(.92); transform-origin: right top; } to { opacity: 1; transform: none; } }
@keyframes wdd-ping { from { opacity: .8; transform: scale(.6); } to { opacity: 0; transform: scale(1.8); } }

/* ============================================================
 * Casca: lateral + conteúdo
 * ============================================================ */

#wdd .wdd-shell {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1024px) {
	#wdd .wdd-shell { grid-template-columns: var(--side) minmax(0, 1fr); }
}

#wdd .wdd-side {
	min-width: 0;
	background: #05120e;
}

#wdd .wdd-side-head { display: none; }

#wdd .wdd-side-scroll {
	padding: 20px 16px 40px;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, .14) transparent;
}

@media (min-width: 1024px) {
	#wdd .wdd-side {
		position: sticky;
		top: var(--top);
		height: calc(100vh - var(--top));
		border-right: 1px solid var(--line);
	}

	#wdd .wdd-side-scroll {
		height: 100%;
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	#wdd .wdd-scrim { display: none !important; }
}

/* Gaveta no celular e no tablet */
@media (max-width: 1023px) {
	#wdd .wdd-side {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		z-index: 90;
		display: flex;
		flex-direction: column;
		width: min(88vw, 360px);
		border-right: 1px solid var(--line-2);
		transform: translateX(-102%);
		visibility: hidden;
		transition: transform .22s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .22s;
	}

	#wdd .wdd-side.is-open {
		transform: none;
		visibility: visible;
		transition: transform .22s cubic-bezier(.2, .8, .2, 1), visibility 0s;
	}

	#wdd .wdd-side-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex: none;
		height: var(--top);
		padding: 0 12px 0 20px;
		border-bottom: 1px solid var(--line);
	}

	#wdd .wdd-side-title {
		color: var(--t1);
		font-size: 16px;
		font-weight: 700;
	}

	#wdd .wdd-side-scroll {
		flex: 1;
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	#wdd .wdd-scrim {
		position: fixed;
		inset: 0;
		z-index: 80;
		background: rgba(1, 6, 4, .66);
		-webkit-backdrop-filter: blur(2px);
		backdrop-filter: blur(2px);
	}
}

@media (prefers-reduced-motion: reduce) {
	#wdd .wdd-side,
	#wdd .wdd-side.is-open { transition: none; }
}

#wdd .wdd-sidesearch {
	display: flex;
	justify-content: flex-start;
	gap: 10px;
	width: 100%;
	height: 44px;
	padding: 0 8px 0 14px;
	border: 1px solid var(--line-2);
	border-radius: var(--r);
	background: var(--s1);
	color: var(--t3);
	font-size: 14px;
	transition: border-color .15s ease, color .15s ease;
}

#wdd .wdd-sidesearch span { flex: 1; text-align: left; }
#wdd .wdd-sidesearch .wdd-i { width: 17px; height: 17px; }

#wdd .wdd-sidesearch:hover,
#wdd .wdd-sidesearch:focus-visible {
	border-color: rgba(37, 211, 102, .5);
	background-color: var(--s1);
	color: var(--t1);
}

#wdd .wdd-nav-block { margin-top: 24px; }

#wdd .wdd-nav-title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 6px;
	padding: 0 12px;
	color: var(--t3);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .09em;
	line-height: 1.6;
	text-transform: uppercase;
}

#wdd .wdd-nav-link {
	display: flex;
	align-items: center;
	min-height: 40px;
	padding: 8px 12px;
	border-radius: var(--r-sm);
	color: var(--t2);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.35;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease;
}

#wdd .wdd-nav-link:hover {
	background: rgba(255, 255, 255, .045);
	color: var(--t1);
}

#wdd .wdd-nav-link[aria-current='true'],
#wdd .wdd-nav-ep[aria-current='true'] {
	background: var(--green-tint);
	color: #fff;
	font-weight: 600;
}

#wdd .wdd-nav-g { margin-top: 2px; }

#wdd .wdd-nav-gsum {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 40px;
	padding: 8px 10px 8px 12px;
	border-radius: var(--r-sm);
	color: var(--t1);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	list-style: none;
	cursor: pointer;
	transition: background-color .15s ease;
}

#wdd .wdd-nav-gsum::-webkit-details-marker { display: none; }
#wdd .wdd-nav-gsum:hover { background: rgba(255, 255, 255, .045); }

#wdd .wdd-nav-gi {
	width: 17px;
	height: 17px;
	color: var(--t3);
}

#wdd .wdd-nav-g.is-current > .wdd-nav-gsum .wdd-nav-gi { color: var(--green); }

#wdd .wdd-nav-gname { flex: 1; min-width: 0; }

#wdd .wdd-nav-chev {
	width: 16px;
	height: 16px;
	color: var(--t3);
	transition: transform .18s ease;
}

#wdd .wdd-nav-g[open] > .wdd-nav-gsum .wdd-nav-chev { transform: rotate(90deg); }

#wdd .wdd-nav-eps { padding: 2px 0 8px 14px; }

#wdd .wdd-nav-ep {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	align-items: start;
	gap: 10px;
	min-height: 40px;
	padding: 9px 10px;
	border-radius: var(--r-sm);
	color: var(--t2);
	font-size: 14px;
	line-height: 1.4;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease;
}

#wdd .wdd-nav-ep:hover {
	background: rgba(255, 255, 255, .045);
	color: var(--t1);
}

#wdd .wdd-nav-ep .wdd-m { margin-top: 1px; }

#wdd .wdd-side-cta {
	display: grid;
	gap: 8px;
	margin-top: 32px;
	padding: 16px 0 0;
	border-top: 1px solid var(--line);
}

@media (min-width: 1024px) {
	#wdd .wdd-side-cta { display: none; }
}

/* ============================================================
 * Conteúdo
 * ============================================================ */

#wdd .wdd-main {
	min-width: 0;
	padding: 0 var(--pad);
	container-type: inline-size;
	container-name: main;
}

#wdd .wdd-main:focus { outline: none; }

@media (max-width: 1279px) {
	#wdd { --pad: 32px; }
}

@media (max-width: 767px) {
	#wdd { --pad: 16px; }
}

#wdd .wdd-guide {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

#wdd .wdd-guide-body {
	min-width: 0;
	max-width: 820px;
	container-type: inline-size;
	container-name: guide;
}

#wdd .wdd-toc { display: none; }

@container main (min-width: 1040px) {
	#wdd .wdd-guide {
		grid-template-columns: minmax(0, 820px) 208px;
		justify-content: space-between;
		gap: 48px;
	}

	#wdd .wdd-toc { display: block; }
}

#wdd .wdd-toc-in {
	position: sticky;
	top: calc(var(--top) + 40px);
	max-height: calc(100vh - var(--top) - 64px);
	padding-top: 72px;
	overflow-y: auto;
	scrollbar-width: none;
}

#wdd .wdd-toc-t {
	margin-bottom: 8px;
	color: var(--t3);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
}

#wdd .wdd-toc-block {
	margin: 4px 0 12px;
	color: var(--t1);
	font-size: 13px;
	font-weight: 700;
}

#wdd .wdd-toc-nav a {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	padding: 5px 0;
	color: var(--t3);
	font-size: 14px;
	line-height: 1.4;
	text-decoration: none;
}

#wdd .wdd-toc-nav a::before {
	content: '';
	width: 5px;
	height: 5px;
	flex: none;
	margin-top: 7px;
	border-radius: 50%;
	background: transparent;
}

#wdd .wdd-toc-nav a:hover { color: var(--t1); }
#wdd .wdd-toc-nav a[aria-current='true'] { color: #fff; font-weight: 600; }
#wdd .wdd-toc-nav a[aria-current='true']::before { background: var(--green); }

#wdd .wdd-toc-nav .wdd-toc-sub {
	padding-left: 13px;
	font-size: 13px;
}

#wdd .wdd-toc-top {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--line);
	color: var(--t3);
	font-size: 13px;
	text-decoration: none;
	width: 100%;
}

#wdd .wdd-toc-top .wdd-i { width: 14px; height: 14px; }

/* ---------- Seções do guia ---------- */

#wdd .wdd-sec {
	padding-top: 88px;
	scroll-margin-top: calc(var(--top) + 8px);
}

#wdd .wdd-sec + .wdd-sec {
	margin-top: 8px;
	border-top: 1px solid var(--line);
}

#wdd .wdd-sec-head { margin-bottom: 28px; }

#wdd .wdd-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
	color: var(--green-t);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

#wdd .wdd-eyebrow .wdd-i { width: 16px; height: 16px; }

#wdd .wdd-h2 {
	color: #fff;
	font-size: clamp(26px, 3.2vw, 34px);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -.025em;
	text-wrap: balance;
}

#wdd .wdd-h3 {
	color: #fff;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	scroll-margin-top: calc(var(--top) + 24px);
}

#wdd .wdd-sec > .wdd-h3,
#wdd .wdd-sec > h3 { margin: 40px 0 12px; }

#wdd .wdd-h4 {
	color: var(--t1);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.35;
}

#wdd .wdd-lead {
	max-width: 680px;
	margin-top: 12px;
	color: var(--t2);
	font-size: 18px;
	line-height: 1.65;
}

#wdd .wdd-sec > p,
#wdd .wdd-step-body > p {
	max-width: 72ch;
	margin-top: 14px;
}

#wdd .wdd-sec > p:first-child,
#wdd .wdd-step-body > p:first-child { margin-top: 0; }

#wdd .wdd-small { color: var(--t3); font-size: 14px; }
#wdd .wdd-muted { color: var(--t3); font-size: 14px; }

#wdd .wdd-sec > .wdd-code,
#wdd .wdd-step-body > .wdd-code { margin-top: 20px; }

/* ---------- Passo a passo ---------- */

#wdd .wdd-stepper { margin-top: 8px; }

#wdd .wdd-step {
	position: relative;
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	gap: 20px;
}

/* Fio neutro que liga um passo ao próximo. */
#wdd .wdd-step:not(:last-child)::before {
	content: '';
	position: absolute;
	top: 48px;
	bottom: 8px;
	left: 19.5px;
	width: 1px;
	background: var(--line-2);
}

#wdd .wdd-step-n {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid rgba(37, 211, 102, .4);
	border-radius: 50%;
	background: var(--green-tint);
	color: var(--green-t);
	font-size: 16px;
	font-weight: 800;
}

#wdd .wdd-step-body {
	min-width: 0;
	padding: 6px 0 48px;
}

#wdd .wdd-step:last-child .wdd-step-body { padding-bottom: 8px; }
#wdd .wdd-step-body > .wdd-h3 { margin-bottom: 10px; }

#wdd .wdd-stepper--compact .wdd-step-body { padding-bottom: 36px; }
#wdd .wdd-stepper--compact .wdd-h3 { font-size: 18px; }

/* Tela estreita: o número sobe para cima do título e o passo usa a largura toda. */
@container guide (max-width: 559px) {
	#wdd .wdd-step { display: block; }
	#wdd .wdd-step:not(:last-child)::before { display: none; }

	#wdd .wdd-step-n {
		width: 32px;
		height: 32px;
		margin-bottom: 12px;
		font-size: 14px;
	}

	#wdd .wdd-step-body { padding: 0 0 40px; }

	#wdd .wdd-step + .wdd-step {
		padding-top: 32px;
		border-top: 1px solid var(--line);
	}
}

#wdd .wdd-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
	margin-top: 20px;
}

@container guide (min-width: 660px) {
	#wdd .wdd-split:not(.wdd-split--code) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }

	#wdd .wdd-split--code .wdd-rows--stack {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 24px;
	}

	#wdd .wdd-split--code .wdd-rows--stack > .wdd-row:nth-last-child(-n+2) { border-bottom: 0; }
}

#wdd .wdd-mini-steps {
	display: grid;
	gap: 12px;
	counter-reset: mini;
}

#wdd .wdd-mini-steps li {
	position: relative;
	padding-left: 36px;
	color: var(--t2);
	font-size: 16px;
	line-height: 1.6;
	counter-increment: mini;
}

#wdd .wdd-mini-steps li::before {
	content: counter(mini);
	position: absolute;
	top: 0;
	left: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	line-height: 1;
	border-radius: 50%;
	background: rgba(255, 255, 255, .07);
	color: var(--t1);
	font-size: 12px;
	font-weight: 700;
}

/* Cartão de exemplo do painel */

#wdd .wdd-mock { min-width: 0; }

#wdd .wdd-mock-card {
	padding: 16px;
	border: 1px solid var(--line-2);
	border-radius: var(--r-lg);
	background: var(--s2);
}

#wdd .wdd-mock-top {
	display: flex;
	align-items: center;
	gap: 12px;
}

#wdd .wdd-mock-av {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex: none;
	border-radius: var(--r);
	background: var(--green-tint);
	color: var(--green);
}

#wdd .wdd-mock-av .wdd-i { width: 20px; height: 20px; }

#wdd .wdd-mock-who strong {
	display: block;
	font-size: 16px;
	line-height: 1.3;
}

#wdd .wdd-mock-who small {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--green-t);
	font-size: 13px;
	font-weight: 600;
}

#wdd .wdd-mock-who small i {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--green);
}

#wdd .wdd-mock-row {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 10px;
	margin-top: 14px;
	padding: 10px 10px 10px 12px;
	border: 1px solid rgba(37, 211, 102, .45);
	border-radius: var(--r);
	background: var(--code);
}

#wdd .wdd-mock-k {
	color: var(--t3);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

#wdd .wdd-mock-v {
	flex: 1 0 auto;
	color: var(--t1);
	font-family: var(--mono);
	font-size: 13px;
	white-space: nowrap;
}

#wdd .wdd-mock-v b {
	color: var(--t3);
	font-weight: 400;
	letter-spacing: .05em;
}

#wdd .wdd-mock-copy {
	display: inline-flex;
	flex: none;
	margin-left: auto;
	align-items: center;
	gap: 6px;
	height: 30px;
	padding: 0 12px;
	border-radius: 999px;
	background: var(--orange-btn);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
}

#wdd .wdd-mock-copy .wdd-i { width: 14px; height: 14px; }

#wdd .wdd-mock-hint {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 10px;
	padding-left: 12px;
	color: var(--green-t);
	font-size: 13px;
	font-weight: 600;
}

#wdd .wdd-mock-hint .wdd-i { width: 15px; height: 15px; }

#wdd .wdd-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
	margin-top: 24px;
}

#wdd .wdd-actions-note { color: var(--t3); font-size: 14px; }

/* Campos do "faça a primeira chamada" */

#wdd .wdd-try {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
	margin-top: 20px;
	padding: 20px;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--s1);
}

@container guide (min-width: 600px) {
	#wdd .wdd-try { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	#wdd .wdd-field--wide,
	#wdd .wdd-try-note { grid-column: 1 / -1; }
}

#wdd .wdd-field { min-width: 0; }

#wdd .wdd-label {
	display: block;
	margin-bottom: 8px;
	color: var(--t1);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
}

#wdd .wdd-input {
	display: block;
	width: 100%;
	height: 48px;
	margin: 0;
	padding: 0 14px;
	border: 1px solid var(--line-2);
	border-radius: var(--r);
	background: var(--code);
	color: #fff;
	font-family: var(--sans);
	font-size: 16px;
	line-height: 1.2;
	box-shadow: none;
	transition: border-color .15s ease, background-color .15s ease;
	-webkit-appearance: none;
	appearance: none;
}

#wdd .wdd-input--mono { font-family: var(--mono); font-size: 14px; }
#wdd .wdd-input::placeholder { color: var(--t3); opacity: .75; }
#wdd .wdd-input:hover { border-color: rgba(255, 255, 255, .24); }

#wdd .wdd-input:focus {
	border-color: var(--green);
	background: #06120e;
	box-shadow: none;
	outline: 2px solid rgba(37, 211, 102, .25);
	outline-offset: 0;
}

#wdd .wdd-input-wrap { position: relative; }
#wdd .wdd-input-wrap .wdd-input { padding-right: 52px; }

#wdd .wdd-input-btn {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	color: var(--t3);
}

#wdd .wdd-input-btn:hover,
#wdd .wdd-input-btn:focus-visible {
	background-color: rgba(255, 255, 255, .06);
	color: #fff;
}

#wdd .wdd-input-btn .wdd-i { width: 18px; height: 18px; }
#wdd .wdd-input-btn .wdd-eye-off { display: none; }
#wdd .wdd-input-btn[aria-pressed='true'] .wdd-eye-on { display: none; }
#wdd .wdd-input-btn[aria-pressed='true'] .wdd-eye-off { display: block; }

#wdd .wdd-hint {
	margin-top: 6px;
	color: var(--t3);
	font-size: 13px;
	line-height: 1.45;
}

#wdd .wdd-try-note {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	color: var(--t3);
	font-size: 13px;
	line-height: 1.5;
}

#wdd .wdd-try-note .wdd-i {
	width: 16px;
	height: 16px;
	margin-top: 1px;
	color: var(--green);
}

/* Trechos do código que o leitor preenche */
#wdd .wdd-ph {
	border-radius: 4px;
	background: rgba(255, 126, 1, .14);
	color: #ffc58a;
	transition: background-color .2s ease, color .2s ease;
}

#wdd .wdd-ph.is-set {
	background: rgba(37, 211, 102, .16);
	color: #a6f5c7;
}

#wdd .wdd-bubble-t.wdd-ph,
#wdd .wdd-bubble-t { background: none; color: inherit; }

/* Painel "se der erro" */

#wdd .wdd-panel {
	margin-top: 40px;
	padding: 24px;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--s1);
	scroll-margin-top: calc(var(--top) + 24px);
}

#wdd .wdd-panel-head {
	display: flex;
	align-items: flex-start;
	gap: 16px;
}

#wdd .wdd-panel-head p { margin-top: 6px; }

#wdd .wdd-panel-i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex: none;
	border-radius: var(--r);
	background: rgba(245, 196, 81, .1);
	color: var(--amber);
}

#wdd .wdd-panel-i .wdd-i { width: 20px; height: 20px; }

#wdd .wdd-fixes {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 12px;
	margin-top: 20px;
}

@container guide (min-width: 600px) {
	#wdd .wdd-fixes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

#wdd .wdd-fix {
	min-width: 0;
	padding: 16px;
	border: 1px solid var(--line);
	border-radius: var(--r);
	background: var(--bg);
}

#wdd .wdd-fix-top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

#wdd a.wdd-fix-code { display: inline-flex; align-items: center; min-height: 40px; text-decoration: none; }
#wdd a.wdd-fix-code code { color: var(--t1); font-size: 13px; }
#wdd a.wdd-fix-code:hover code { border-color: rgba(37, 211, 102, .5); }

#wdd .wdd-fix-t {
	margin-top: 10px;
	color: var(--t1);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
}

#wdd .wdd-fix-d {
	margin-top: 4px;
	color: var(--t2);
	font-size: 14px;
	line-height: 1.55;
}

#wdd a.wdd-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 40px;
	margin-top: 16px;
	color: var(--green-t);
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
}

#wdd a.wdd-link-arrow .wdd-i {
	width: 16px;
	height: 16px;
	transition: transform .15s ease;
}

#wdd a.wdd-link-arrow:hover { color: #7ff0b8; }
#wdd a.wdd-link-arrow:hover .wdd-i { transform: translateX(3px); }

/* ---------- Conceitos e tarefas ---------- */

#wdd .wdd-concepts,
#wdd .wdd-tasks,
#wdd .wdd-creds {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
	gap: 16px;
}

@container guide (min-width: 600px) {
	#wdd .wdd-concepts,
	#wdd .wdd-tasks,
	#wdd .wdd-creds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

#wdd .wdd-concept,
#wdd .wdd-cred {
	min-width: 0;
	padding: 24px;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--s1);
}

#wdd .wdd-concept-i,
#wdd .wdd-task-i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex: none;
	border-radius: var(--r);
	background: var(--green-tint);
	color: var(--green);
}

#wdd .wdd-concept-i .wdd-i,
#wdd .wdd-task-i .wdd-i { width: 20px; height: 20px; }

/* Ícone e título na mesma linha: o cartão fica curto, inclusive no celular. */
#wdd .wdd-concept {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	align-items: center;
	align-content: start;
	column-gap: 14px;
}

#wdd .wdd-concept > :not(.wdd-concept-i):not(.wdd-h4) { grid-column: 1 / -1; }
#wdd .wdd-concept .wdd-h4 { margin-top: 0; }

#wdd .wdd-concept p {
	margin-top: 14px;
	color: var(--t2);
	font-size: 16px;
	line-height: 1.6;
}

#wdd .wdd-jids {
	display: grid;
	gap: 8px;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--line);
}

#wdd .wdd-jids > div {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	align-items: baseline;
	gap: 8px;
}

#wdd .wdd-jids dt { color: var(--t3); font-size: 13px; }
#wdd .wdd-jids dd { min-width: 0; }
#wdd .wdd-jids code { font-size: 13px; }

#wdd a.wdd-task {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	grid-template-rows: auto auto;
	column-gap: 16px;
	row-gap: 2px;
	height: 100%;
	padding: 20px;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--s1);
	text-decoration: none;
	transition: border-color .15s ease, background-color .15s ease;
}

#wdd a.wdd-task:hover {
	border-color: rgba(37, 211, 102, .45);
	background: var(--s2);
}

#wdd .wdd-task-i { grid-row: 1 / span 2; }

#wdd .wdd-task-t {
	color: var(--t1);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
}

#wdd .wdd-task-d {
	color: var(--t3);
	font-size: 14px;
	line-height: 1.5;
}

#wdd .wdd-cred-head {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 8px;
}

#wdd .wdd-cred-sub {
	margin-top: 2px;
	color: var(--t3);
	font-size: 14px;
}

/* ---------- Linhas de definição (no lugar de tabela larga) ---------- */

#wdd .wdd-rows {
	margin-top: 16px;
	border-top: 1px solid var(--line);
}

#wdd .wdd-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-content: start;
	gap: 6px 24px;
	padding: 14px 0;
	border-bottom: 1px solid var(--line);
}

@container guide (min-width: 600px) {
	#wdd .wdd-rows:not(.wdd-rows--stack) > .wdd-row { grid-template-columns: minmax(180px, 36%) minmax(0, 1fr); }
}

#wdd .wdd-row dt {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	min-width: 0;
	color: var(--t1);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
}

#wdd .wdd-row dd {
	min-width: 0;
	color: var(--t2);
	font-size: 16px;
	line-height: 1.6;
}

#wdd .wdd-rows--stack { border-top: 0; margin-top: 0; }
#wdd .wdd-rows--stack > .wdd-row { padding: 12px 0; }
#wdd .wdd-rows--stack > .wdd-row:last-child { border-bottom: 0; }

#wdd .wdd-cred .wdd-rows--stack dt {
	color: var(--t3);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
}

#wdd .wdd-tag {
	display: inline-flex;
	align-items: center;
	height: 22px;
	padding: 0 8px;
	border: 1px solid var(--line-2);
	border-radius: 999px;
	color: var(--t3);
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}

#wdd .wdd-size { color: #fff; font-size: 16px; font-variant-numeric: tabular-nums; }

#wdd .wdd-rows--http dt strong { font-size: 14px; }

/* Referências a rotas no meio do texto */
#wdd a.wdd-xref {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-width: 100%;
	margin: 2px 0;
	padding: 1px 8px 1px 3px;
	border: 1px solid var(--line-2);
	border-radius: 7px;
	background: rgba(255, 255, 255, .04);
	color: var(--t1);
	font-family: var(--mono);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.6;
	text-decoration: none;
	vertical-align: baseline;
	transition: border-color .15s ease, background-color .15s ease;
}

#wdd a.wdd-xref:hover {
	border-color: rgba(37, 211, 102, .55);
	background: var(--green-tint);
	color: #fff;
}

#wdd .wdd-xref-p { min-width: 0; overflow-wrap: anywhere; }

#wdd .wdd-xrefs { display: inline; }
#wdd .wdd-xrefs a.wdd-xref { margin-right: 6px; }

#wdd .wdd-xrefs-more {
	color: var(--t3);
	font-size: 14px;
	white-space: nowrap;
}

/* Lista de rotas de um grupo, dentro do guia */
#wdd .wdd-routelist {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 8px;
	margin-top: 16px;
}

@container guide (min-width: 600px) {
	#wdd .wdd-routelist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

#wdd .wdd-routelist a {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 52px;
	height: 100%;
	padding: 10px 12px 10px 14px;
	border: 1px solid var(--line);
	border-radius: var(--r);
	background: var(--s1);
	color: var(--t1);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	text-decoration: none;
	transition: border-color .15s ease, background-color .15s ease;
}

#wdd .wdd-routelist a > span:not(.wdd-m) { flex: 1; min-width: 0; }
#wdd .wdd-routelist .wdd-m { flex: none; }
#wdd .wdd-routelist a:hover { border-color: rgba(37, 211, 102, .45); background: var(--s2); }
#wdd .wdd-routelist-c { width: 16px; height: 16px; color: var(--t3); }

#wdd .wdd-vals-line {
	display: grid;
	gap: 8px;
	margin-top: 14px;
}

#wdd .wdd-vals-k { color: var(--t3); font-size: 14px; }

/* ---------- Avisos ---------- */

#wdd .wdd-callout {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-top: 24px;
	padding: 16px 18px;
	border: 1px solid rgba(37, 211, 102, .22);
	border-radius: var(--r);
	background: rgba(37, 211, 102, .06);
}

#wdd .wdd-callout p {
	color: var(--t2);
	font-size: 16px;
	line-height: 1.6;
}

#wdd .wdd-callout-i {
	width: 20px;
	height: 20px;
	margin-top: 2px;
	color: var(--green);
}

#wdd .wdd-callout--warn {
	border-color: rgba(245, 196, 81, .28);
	background: rgba(245, 196, 81, .06);
}

#wdd .wdd-callout--warn .wdd-callout-i { color: var(--amber); }

/* ---------- Listas com marca de verificação ---------- */

#wdd .wdd-checks {
	display: grid;
	gap: 14px;
	margin-top: 4px;
}

#wdd .wdd-checks li {
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr);
	gap: 12px;
	color: var(--t2);
	font-size: 16px;
	line-height: 1.65;
}

#wdd .wdd-checks-i {
	width: 28px;
	height: 28px;
	padding: 6px;
	border-radius: 50%;
	background: var(--green-tint);
	color: var(--green);
	stroke-width: 2.4;
}

/* ---------- Fluxo numerado e linha do tempo ---------- */

#wdd .wdd-flow {
	display: grid;
	gap: 12px;
	margin-top: 16px;
}

#wdd .wdd-flow li {
	display: grid;
	grid-template-columns: 32px minmax(0, 1fr);
	align-items: start;
	gap: 12px;
	padding: 14px 16px;
	border: 1px solid var(--line);
	border-radius: var(--r);
	background: var(--s1);
}

#wdd .wdd-flow-n {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .07);
	color: var(--t1);
	font-size: 13px;
	font-weight: 700;
}

#wdd .wdd-flow p {
	margin-top: 2px;
	color: var(--t2);
	font-size: 16px;
	line-height: 1.6;
}

#wdd .wdd-timeline {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
	gap: 8px;
	margin-top: 16px;
}

#wdd .wdd-timeline li {
	padding: 12px 14px;
	border: 1px solid var(--line);
	border-radius: var(--r);
	background: var(--s1);
}

#wdd .wdd-timeline-k {
	display: block;
	color: var(--t3);
	font-size: 13px;
	line-height: 1.4;
}

#wdd .wdd-timeline strong {
	display: block;
	margin-top: 2px;
	color: #fff;
	font-size: 20px;
	font-weight: 800;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
}

/* ---------- Planos ---------- */

#wdd .wdd-plans {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin-top: 8px;
	margin-bottom: 24px;
}

@container guide (min-width: 720px) {
	#wdd .wdd-plans { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

#wdd .wdd-plan {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 20px;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--s1);
}

#wdd .wdd-plan-name {
	color: var(--t1);
	font-size: 16px;
	font-weight: 700;
}

#wdd .wdd-plan--trial .wdd-plan-name { color: var(--green-t); }

#wdd .wdd-plan-rps { margin-top: 12px; }

#wdd .wdd-plan-rps strong {
	display: block;
	color: #fff;
	font-size: 40px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.03em;
	font-variant-numeric: tabular-nums;
}

#wdd .wdd-plan-rps span {
	display: block;
	margin-top: 6px;
	color: var(--t3);
	font-size: 13px;
	line-height: 1.3;
}

#wdd .wdd-plan-facts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--line);
}

#wdd .wdd-plan-facts dt { color: var(--t3); font-size: 12px; line-height: 1.3; }
#wdd .wdd-plan-facts dd { color: var(--t1); font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }

#wdd .wdd-plan-note {
	margin-top: 14px;
	color: var(--t3);
	font-size: 13px;
	line-height: 1.5;
}

/* ---------- Catálogo de erros ---------- */

#wdd .wdd-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 20px;
}

/* Celular: uma linha só, que rola para o lado, com o fim esmaecido. */
@container guide (max-width: 599px) {
	#wdd .wdd-filter {
		flex-wrap: nowrap;
		margin-right: calc(-1 * var(--pad));
		padding-right: 40px;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
		mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
	}

	#wdd .wdd-filter::-webkit-scrollbar { display: none; }
	#wdd .wdd-fchip { flex: none; white-space: nowrap; }
}

/* Referência a rota fora do texto corrido (linhas de definição): alvo de 40 px. */
#wdd .wdd-row dt a.wdd-xref { min-height: 40px; padding: 0 10px 0 6px; }

#wdd .wdd-fchip {
	gap: 8px;
	min-height: 40px;
	padding: 0 14px;
	border: 1px solid var(--line-2);
	border-radius: 999px;
	color: var(--t2);
	font-size: 14px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

#wdd .wdd-fchip:hover,
#wdd .wdd-fchip:focus-visible {
	border-color: rgba(37, 211, 102, .45);
	color: #fff;
}

#wdd .wdd-fchip[aria-pressed='true'],
#wdd .wdd-fchip[aria-pressed='true']:hover {
	border-color: rgba(37, 211, 102, .6);
	background-color: rgba(37, 211, 102, .14);
	color: #fff;
}

#wdd .wdd-fchip-n {
	color: var(--t3);
	font-size: 12px;
	font-weight: 600;
}

#wdd .wdd-errs {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 12px;
}

@container guide (min-width: 600px) {
	#wdd .wdd-errs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

#wdd .wdd-err {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 18px;
	border: 1px solid var(--line);
	border-radius: var(--r);
	background: var(--s1);
	scroll-margin-top: calc(var(--top) + 24px);
	transition: border-color .3s ease, background-color .3s ease;
}

#wdd .wdd-err:target {
	border-color: rgba(37, 211, 102, .6);
	background: var(--s2);
}

#wdd .wdd-err-top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

#wdd .wdd-err-code.wdd-err-code {
	padding: 0;
	border: 0;
	background: none;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	overflow-wrap: anywhere;
}

#wdd .wdd-err-t {
	margin-top: 8px;
	color: var(--t1);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
}

#wdd .wdd-err-d {
	margin-top: 4px;
	color: var(--t2);
	font-size: 14px;
	line-height: 1.55;
}

#wdd .wdd-err-m {
	margin-top: auto;
	padding-top: 12px;
	color: var(--t3);
	font-size: 13px;
	line-height: 1.5;
}

#wdd .wdd-err-m span {
	display: block;
	margin-bottom: 2px;
	color: var(--t3);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	opacity: .85;
}

/* ============================================================
 * Selos: método e status
 * ============================================================ */

#wdd .wdd-m {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	min-width: 56px;
	height: 26px;
	padding: 0 8px;
	border: 1px solid;
	border-radius: 7px;
	font-family: var(--mono);
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .03em;
}

#wdd .wdd-m--xs {
	min-width: 40px;
	height: 20px;
	padding: 0 5px;
	border-radius: 5px;
	font-size: 12px;
}

#wdd .wdd-m--get { border-color: rgba(142, 203, 255, .3); background: rgba(142, 203, 255, .1); color: var(--blue); }
#wdd .wdd-m--post { border-color: rgba(37, 211, 102, .32); background: rgba(37, 211, 102, .1); color: #5ee9a0; }
#wdd .wdd-m--put,
#wdd .wdd-m--patch { border-color: rgba(245, 196, 81, .3); background: rgba(245, 196, 81, .1); color: var(--amber); }
#wdd .wdd-m--delete { border-color: rgba(255, 138, 138, .3); background: rgba(255, 138, 138, .1); color: var(--red); }

#wdd .wdd-st {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	min-width: 40px;
	height: 22px;
	padding: 0 7px;
	border-radius: 6px;
	font-family: var(--mono);
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	vertical-align: middle;
}

#wdd .wdd-st--2xx { background: rgba(37, 211, 102, .13); color: #5ee9a0; }
#wdd .wdd-st--3xx { background: rgba(142, 203, 255, .12); color: var(--blue); }
#wdd .wdd-st--4xx { background: rgba(245, 196, 81, .12); color: var(--amber); }
#wdd .wdd-st--5xx { background: rgba(255, 138, 138, .12); color: var(--red); }

/* ============================================================
 * Blocos de código
 * ============================================================ */

#wdd .wdd-code {
	position: relative;
	min-width: 0;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--r);
	background: var(--code);
	container-type: inline-size;
	container-name: code;
}

/* Bloco estreito: o "Copiar" vira só o ícone e as abas encolhem, para as quatro caberem. */
@container code (max-width: 420px) {
	#wdd .wdd-copy span { display: none; }
	#wdd .wdd-copy { width: 40px; padding: 0; }
	#wdd .wdd-tab { padding: 0 9px; font-size: 13px; }
	#wdd .wdd-pre { padding: 14px 16px 16px; font-size: 13px; }
}

#wdd .wdd-code-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-height: 48px;
	padding: 0 4px 0 6px;
	border-bottom: 1px solid var(--line);
	background: var(--code-bar);
}

#wdd .wdd-code-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	padding-left: 8px;
	color: var(--t3);
	font-size: 13px;
	font-weight: 600;
}

#wdd .wdd-tabs {
	display: flex;
	align-items: stretch;
	align-self: stretch;
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
}

#wdd .wdd-tabs::-webkit-scrollbar { display: none; }

#wdd .wdd-tab {
	position: relative;
	flex: none;
	min-height: 47px;
	padding: 0 12px;
	color: var(--t3);
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	transition: color .15s ease;
}

#wdd .wdd-tab:hover,
#wdd .wdd-tab:focus-visible { color: var(--t1); }

#wdd .wdd-tab::after {
	content: '';
	position: absolute;
	right: 10px;
	bottom: -1px;
	left: 10px;
	height: 2px;
	border-radius: 2px 2px 0 0;
	background: transparent;
	transition: background-color .15s ease;
}

#wdd .wdd-tab[aria-selected='true'] { color: #fff; }
#wdd .wdd-tab[aria-selected='true']::after { background: var(--green); }
#wdd .wdd-tab:focus-visible { outline-offset: -4px; }

#wdd .wdd-copy {
	gap: 6px;
	flex: none;
	min-height: 40px;
	padding: 0 12px;
	border-radius: 10px;
	color: var(--t3);
	font-size: 13px;
	font-weight: 600;
	transition: color .15s ease, background-color .15s ease;
}

#wdd .wdd-copy:hover,
#wdd .wdd-copy:focus-visible {
	background-color: rgba(255, 255, 255, .06);
	color: #fff;
}

#wdd .wdd-copy .wdd-i { width: 15px; height: 15px; }
#wdd .wdd-copy-ok { display: none; }
#wdd .wdd-copy.is-done { color: var(--green-t); }
#wdd .wdd-copy.is-done .wdd-copy-i { display: none; }
#wdd .wdd-copy.is-done .wdd-copy-ok { display: block; }

#wdd .wdd-pre {
	margin: 0;
	padding: 16px 20px 18px;
	overflow: auto;
	background: none;
	color: #d6e2dd;
	font-size: 13px;
	line-height: 1.7;
	white-space: pre;
	tab-size: 2;
	word-break: normal;
	overflow-wrap: normal;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, .16) transparent;
}

#wdd .wdd-pre code {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: inherit;
	font-size: inherit;
	font-weight: 400;
	white-space: inherit;
	overflow-wrap: normal;
}

/* Sem ligaturas: "--url" e "=>" aparecem como se digitam. */
#wdd code,
#wdd pre,
#wdd kbd {
	font-variant-ligatures: none;
	font-feature-settings: 'calt' 0, 'liga' 0;
}

/*
 * Requisições quebram a linha em vez de cortar. Cada linha é um bloco com
 * recuo pendente: a continuação de uma linha longa entra 4 colunas, então
 * a estrutura do código continua legível e nada some da borda.
 */
#wdd .wdd-pre--wrap {
	overflow-x: hidden;
	white-space: pre-wrap;
	overflow-wrap: break-word;
}

#wdd .wdd-pre--wrap code { overflow-wrap: break-word; }

#wdd .wdd-pre--wrap .ln {
	display: block;
	padding-left: 4ch;
	text-indent: -4ch;
}

#wdd .wdd-pre--wrap .ln:empty::before { content: '\200b'; }

#wdd .wdd-pre--wrap .ln.i0 { padding-left: 2ch; text-indent: -2ch; }
#wdd .wdd-pre--wrap .ln.i1 { padding-left: 3ch; text-indent: -3ch; }
#wdd .wdd-pre--wrap .ln.i2 { padding-left: 4ch; text-indent: -4ch; }
#wdd .wdd-pre--wrap .ln.i3 { padding-left: 5ch; text-indent: -5ch; }
#wdd .wdd-pre--wrap .ln.i4 { padding-left: 6ch; text-indent: -6ch; }
#wdd .wdd-pre--wrap .ln.i5 { padding-left: 7ch; text-indent: -7ch; }
#wdd .wdd-pre--wrap .ln.i6 { padding-left: 8ch; text-indent: -8ch; }
#wdd .wdd-pre--wrap .ln.i7 { padding-left: 9ch; text-indent: -9ch; }
#wdd .wdd-pre--wrap .ln.i8 { padding-left: 10ch; text-indent: -10ch; }
#wdd .wdd-pre--wrap .ln.i9 { padding-left: 11ch; text-indent: -11ch; }
#wdd .wdd-pre--wrap .ln.i10 { padding-left: 12ch; text-indent: -12ch; }
#wdd .wdd-pre--wrap .ln.i11 { padding-left: 13ch; text-indent: -13ch; }
#wdd .wdd-pre--wrap .ln.i12 { padding-left: 14ch; text-indent: -14ch; }
#wdd .wdd-pre--wrap .ln.i13 { padding-left: 15ch; text-indent: -15ch; }
#wdd .wdd-pre--wrap .ln.i14 { padding-left: 16ch; text-indent: -16ch; }
#wdd .wdd-pre--wrap .ln.i15 { padding-left: 17ch; text-indent: -17ch; }
#wdd .wdd-pre--wrap .ln.i16 { padding-left: 18ch; text-indent: -18ch; }
#wdd .wdd-pre--wrap .ln.i17 { padding-left: 19ch; text-indent: -19ch; }
#wdd .wdd-pre--wrap .ln.i18 { padding-left: 20ch; text-indent: -20ch; }
#wdd .wdd-pre--wrap .ln.i19 { padding-left: 21ch; text-indent: -21ch; }
#wdd .wdd-pre--wrap .ln.i20 { padding-left: 22ch; text-indent: -22ch; }
#wdd .wdd-pre--wrap .ln.i21 { padding-left: 23ch; text-indent: -23ch; }
#wdd .wdd-pre--wrap .ln.i22 { padding-left: 24ch; text-indent: -24ch; }
#wdd .wdd-pre--wrap .ln.i23 { padding-left: 25ch; text-indent: -25ch; }
#wdd .wdd-pre--wrap .ln.i24 { padding-left: 26ch; text-indent: -26ch; }

/*
 * Respostas JSON rolam para o lado. Quando há mais à direita, o fim esmaece
 * e uma seta avisa; a barra de rolagem fica visível de verdade.
 */
#wdd .wdd-pre.can-right {
	-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 72px), rgba(0, 0, 0, .2));
	mask-image: linear-gradient(to right, #000 calc(100% - 72px), rgba(0, 0, 0, .2));
}

#wdd .wdd-code.can-right::after {
	content: '';
	position: absolute;
	top: 64px;
	right: 12px;
	width: 28px;
	height: 28px;
	border: 1px solid var(--line-2);
	border-radius: 50%;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c3d1cc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E") center / 14px no-repeat,
		var(--s3);
	pointer-events: none;
}

#wdd .wdd-pre { scrollbar-color: rgba(255, 255, 255, .32) transparent; }
#wdd .wdd-pre::-webkit-scrollbar { width: 10px; height: 10px; }
#wdd .wdd-pre::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 10px; background: rgba(255, 255, 255, .32) padding-box; }

#wdd .t-s { color: #a5e8b8; }
#wdd .t-k { color: #8ecbff; }
#wdd .t-n { color: #ffb86b; }
#wdd .t-w { color: #c9a8ff; }
#wdd .t-c { color: #6f857e; font-style: italic; }

/* Resposta longa: nasce recolhida, com um degradê sobre o fim. */
#wdd .wdd-code.is-folded .wdd-pre {
	max-height: 340px;
	overflow-x: auto;
	overflow-y: hidden;
}

#wdd .wdd-code.is-folded .wdd-pre::after {
	content: '';
	position: absolute;
	right: 0;
	bottom: 48px;
	left: 0;
	height: 72px;
	background: linear-gradient(transparent, var(--code));
	pointer-events: none;
}

#wdd .wdd-fold {
	gap: 8px;
	width: 100%;
	min-height: 48px;
	border-top: 1px solid var(--line);
	color: var(--green-t);
	font-size: 14px;
	font-weight: 600;
	transition: background-color .15s ease;
}

#wdd .wdd-fold:hover,
#wdd .wdd-fold:focus-visible {
	background-color: rgba(255, 255, 255, .03);
	color: #7ff0b8;
}

#wdd .wdd-fold-i { width: 16px; height: 16px; transition: transform .18s ease; }
#wdd .wdd-fold[aria-expanded='true'] .wdd-fold-i { transform: rotate(180deg); }

#wdd .wdd-grid2 {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
	margin-top: 20px;
}

@container guide (min-width: 660px) {
	#wdd .wdd-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}

/* ============================================================
 * Referência
 * ============================================================ */

#wdd .wdd-ref {
	margin-top: 96px;
	padding-top: 88px;
	border-top: 1px solid var(--line);
	scroll-margin-top: calc(var(--top) + 8px);
}

#wdd .wdd-gcards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
	gap: 12px;
}

#wdd a.wdd-gcard {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 20px;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--s1);
	text-decoration: none;
	transition: border-color .15s ease, background-color .15s ease;
}

#wdd a.wdd-gcard:hover {
	border-color: rgba(37, 211, 102, .45);
	background: var(--s2);
}

#wdd .wdd-gcard-i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--r);
	background: var(--green-tint);
	color: var(--green);
}

#wdd .wdd-gcard-i .wdd-i { width: 20px; height: 20px; }

#wdd .wdd-gcard-t {
	margin-top: 14px;
	color: var(--t1);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
}

#wdd .wdd-gcard-d {
	flex: 1;
	margin-top: 4px;
	color: var(--t3);
	font-size: 14px;
	line-height: 1.5;
}

#wdd .wdd-gcard-n {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 14px;
	color: var(--green-t);
	font-size: 14px;
	font-weight: 600;
}

#wdd .wdd-gcard-n .wdd-i { width: 15px; height: 15px; transition: transform .15s ease; }
#wdd a.wdd-gcard:hover .wdd-gcard-n .wdd-i { transform: translateX(3px); }

#wdd .wdd-group {
	margin-top: 96px;
	padding-top: 72px;
	border-top: 1px solid var(--line);
	scroll-margin-top: calc(var(--top) + 8px);
}

#wdd .wdd-group-head {
	display: flex;
	align-items: flex-start;
	gap: 20px;
}

#wdd .wdd-group-i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	flex: none;
	border: 1px solid rgba(37, 211, 102, .25);
	border-radius: var(--r);
	background: var(--green-tint);
	color: var(--green);
}

#wdd .wdd-group-i .wdd-i { width: 24px; height: 24px; }

#wdd .wdd-group-txt { min-width: 0; }
#wdd .wdd-group-txt .wdd-eyebrow { margin-bottom: 6px; }

#wdd .wdd-group-d {
	max-width: 640px;
	margin-top: 8px;
	color: var(--t2);
	font-size: 16px;
	line-height: 1.6;
}

@media (max-width: 599px) {
	#wdd .wdd-group-head { flex-direction: column; gap: 16px; }
}

/* Índice das rotas do grupo */
#wdd .wdd-index {
	margin-top: 28px;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--s1);
}

#wdd .wdd-index li + li { border-top: 1px solid var(--line); }

#wdd .wdd-index {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

@container main (min-width: 900px) {
	#wdd .wdd-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	#wdd .wdd-index li + li { border-top: 0; }
	#wdd .wdd-index li:nth-child(n+3) { border-top: 1px solid var(--line); }
	#wdd .wdd-index li:nth-child(even) { border-left: 1px solid var(--line); }
}

#wdd a.wdd-index-row {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr) 16px;
	align-items: center;
	gap: 14px;
	height: 100%;
	min-height: 64px;
	padding: 12px 16px;
	color: var(--t2);
	text-decoration: none;
	transition: background-color .15s ease;
}

#wdd a.wdd-index-row:hover { background: rgba(255, 255, 255, .03); }

#wdd .wdd-index-txt { min-width: 0; }

#wdd .wdd-index-s {
	display: block;
	color: var(--t1);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
}

#wdd .wdd-index-p.wdd-index-p {
	display: block;
	margin-top: 2px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--t3);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.5;
	overflow-wrap: anywhere;
}

#wdd .wdd-index-c {
	width: 16px;
	height: 16px;
	color: var(--t3);
	transition: transform .15s ease, color .15s ease;
}

#wdd a.wdd-index-row:hover .wdd-index-c { color: var(--green); transform: translateX(2px); }

#wdd .wdd-pp { color: var(--green-2); }

/* ---------- Uma rota ---------- */

/*
 * Três áreas: a (o que a rota faz), c (o código) e b (o que recebe e
 * devolve). Empilhado, a ordem é a, c, b: o exemplo vem logo depois da
 * descrição. Lado a lado, o código ocupa a coluna da direita inteira e
 * acompanha a rolagem.
 */
#wdd .wdd-ep {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: 'a' 'c' 'b';
	margin-top: 64px;
	padding-top: 56px;
	border-top: 1px solid var(--line);
	scroll-margin-top: calc(var(--top) + 8px);
}

#wdd .wdd-ep-a { grid-area: a; }
#wdd .wdd-ep-b { grid-area: b; }
#wdd .wdd-ep-code { grid-area: c; margin-top: 28px; }

/* Empilhado: a resposta nasce mais curta, para não empurrar os parâmetros. */
#wdd .wdd-ep-code .wdd-code.is-folded .wdd-pre { max-height: 200px; }

@container main (min-width: 960px) {
	#wdd .wdd-ep {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
		grid-template-areas: 'a c' 'b c';
		grid-template-rows: auto 1fr;
		column-gap: 40px;
	}

	#wdd .wdd-ep-code { margin-top: 0; }

	#wdd .wdd-ep-sticky {
		position: sticky;
		top: calc(var(--top) + 24px);
	}

	#wdd .wdd-ep-code .wdd-pre { max-height: min(520px, calc(100vh - 340px)); }
	#wdd .wdd-ep-code .wdd-code.is-folded .wdd-pre { max-height: 300px; }
}

#wdd .wdd-ep-code .wdd-pre {
	padding: 16px;
	font-size: 13px;
}

#wdd .wdd-ep-doc,
#wdd .wdd-ep-code { min-width: 0; }

#wdd .wdd-ep-title {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	color: #fff;
	font-size: clamp(22px, 2.4vw, 26px);
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -.02em;
}

#wdd a.wdd-ep-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex: none;
	margin-top: -6px;
	border-radius: var(--r-sm);
	color: var(--t3);
	opacity: 0;
	text-decoration: none;
	transition: opacity .15s ease, background-color .15s ease, color .15s ease;
}

#wdd a.wdd-ep-link .wdd-i { width: 17px; height: 17px; }

#wdd .wdd-ep-head:hover a.wdd-ep-link,
#wdd a.wdd-ep-link:focus-visible,
#wdd a.wdd-ep-link.is-done { opacity: 1; }

#wdd a.wdd-ep-link:hover { background: rgba(255, 255, 255, .06); color: #fff; }
#wdd a.wdd-ep-link.is-done { color: var(--green-t); }

@media (hover: none) {
	#wdd a.wdd-ep-link { opacity: 1; }
}

#wdd .wdd-route {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 16px;
	padding: 6px 4px 6px 8px;
	border: 1px solid var(--line);
	border-radius: var(--r);
	background: var(--code);
}

#wdd .wdd-route-p.wdd-route-p {
	flex: 1;
	min-width: 0;
	padding: 4px 0;
	border: 0;
	background: none;
	color: #fff;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	overflow-wrap: anywhere;
}

#wdd .wdd-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
}

#wdd .wdd-fact {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 30px;
	padding: 4px 12px 4px 10px;
	border: 1px solid var(--line);
	border-radius: 999px;
	color: var(--t2);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
}

#wdd .wdd-fact .wdd-i { width: 14px; height: 14px; color: var(--t3); }

/* Informação, não ação: verde do produto, nunca o laranja dos botões. */
#wdd .wdd-fact--on {
	border-color: rgba(37, 211, 102, .3);
	background: rgba(37, 211, 102, .07);
	color: #c6f5da;
}

#wdd .wdd-fact--on .wdd-i { color: var(--green); }

#wdd .wdd-fact--old {
	border-color: rgba(255, 138, 138, .3);
	color: #ffc2c2;
}

#wdd .wdd-ep-trial {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-top: 12px;
	color: var(--t3);
	font-size: 14px;
	line-height: 1.5;
}

#wdd .wdd-ep-trial .wdd-i { width: 16px; height: 16px; margin-top: 2px; }

#wdd .wdd-desc { margin-top: 20px; }

#wdd .wdd-aliases {
	margin-top: 14px;
	color: var(--t3);
	font-size: 14px;
}

/* Texto vindo do registro (markdown) */
#wdd .wdd-prose {
	color: var(--t2);
	font-size: 16px;
	line-height: 1.7;
	overflow-wrap: anywhere;
}

#wdd .wdd-prose > * + * { margin-top: 12px; }
#wdd .wdd-prose p { margin: 0; }
#wdd .wdd-prose > * + p { margin-top: 12px; }

#wdd .wdd-prose .wdd-md-h {
	margin-top: 24px;
	color: var(--t1);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
}

#wdd .wdd-prose .wdd-md-list {
	display: grid;
	gap: 6px;
	padding-left: 4px;
}

#wdd .wdd-prose ul.wdd-md-list > li {
	position: relative;
	padding-left: 18px;
}

#wdd .wdd-prose ul.wdd-md-list > li::before {
	content: '';
	position: absolute;
	top: .72em;
	left: 2px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--t3);
}

#wdd .wdd-prose ol.wdd-md-list {
	padding-left: 22px;
	list-style: decimal;
}

#wdd .wdd-prose ol.wdd-md-list > li::marker { color: var(--t3); font-weight: 600; }
#wdd .wdd-prose .wdd-md-list .wdd-md-list { margin-top: 6px; }

#wdd .wdd-prose .wdd-code { margin-top: 14px; }
#wdd .wdd-prose .wdd-code .wdd-pre { font-size: 13px; }

#wdd .wdd-note {
	padding: 12px 16px;
	border: 1px solid var(--line);
	border-radius: var(--r);
	background: rgba(255, 255, 255, .03);
	color: var(--t2);
	font-size: 14px;
}

#wdd .wdd-scroll {
	max-width: 100%;
	overflow-x: auto;
	border: 1px solid var(--line);
	border-radius: var(--r);
	scrollbar-width: thin;
}

#wdd .wdd-table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font-size: 14px;
	line-height: 1.5;
}

#wdd .wdd-table th,
#wdd .wdd-table td {
	min-width: 112px;
	padding: 10px 14px;
	border: 0;
	border-bottom: 1px solid var(--line);
	background: none;
	color: var(--t2);
	text-align: left;
	vertical-align: top;
}

#wdd .wdd-table th {
	background: var(--code-bar);
	color: var(--t1);
	font-size: 13px;
	font-weight: 700;
}

#wdd .wdd-table tr:last-child td { border-bottom: 0; }

/* "Ver mais" e outros recolhíveis */
#wdd .wdd-more { margin-top: 12px; }

#wdd .wdd-more > summary,
#wdd .wdd-kids > summary,
#wdd .wdd-errlist > summary {
	list-style: none;
	cursor: pointer;
}

#wdd .wdd-more > summary::-webkit-details-marker,
#wdd .wdd-kids > summary::-webkit-details-marker,
#wdd .wdd-errlist > summary::-webkit-details-marker { display: none; }

#wdd .wdd-more > summary {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 40px;
	padding: 0 14px;
	border: 1px solid var(--line-2);
	border-radius: 999px;
	color: var(--t1);
	font-size: 14px;
	font-weight: 600;
	transition: border-color .15s ease, background-color .15s ease;
}

#wdd .wdd-more > summary:hover {
	border-color: rgba(37, 211, 102, .45);
	background: var(--green-tint);
}

#wdd .wdd-more-i { width: 16px; height: 16px; color: var(--t3); transition: transform .18s ease; }
#wdd details[open] > summary .wdd-more-i { transform: rotate(180deg); }
#wdd .wdd-more[open] > summary { margin-bottom: 16px; }

#wdd .wdd-more--sm { margin-top: 6px; }

#wdd .wdd-more--sm > summary {
	min-height: 40px;
	padding: 0;
	border: 0;
	color: var(--green-t);
	font-size: 14px;
}

#wdd .wdd-more--sm > summary:hover { background: none; color: #7ff0b8; }
#wdd .wdd-more--sm > summary .wdd-more-i { color: currentColor; }
#wdd .wdd-more--sm[open] > summary { margin-bottom: 4px; }

/* ---------- Parâmetros ---------- */

#wdd .wdd-block { margin-top: 40px; }

#wdd .wdd-block > .wdd-h4 {
	font-size: 18px;
}

#wdd .wdd-block-hint {
	margin-top: 4px;
	color: var(--t3);
	font-size: 14px;
	line-height: 1.5;
}

#wdd .wdd-params {
	margin-top: 14px;
	border-top: 1px solid var(--line);
}

#wdd .wdd-param {
	min-width: 0;
	padding: 16px 0 18px;
	border-bottom: 1px solid var(--line);
}

#wdd .wdd-param-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
}

#wdd .wdd-param-name.wdd-param-name {
	min-width: 0;
	padding: 0;
	border: 0;
	background: none;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
	overflow-wrap: anywhere;
}

#wdd .wdd-chip {
	display: inline-flex;
	align-items: center;
	height: 22px;
	padding: 0 8px;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
}

#wdd .wdd-chip--type { background: rgba(255, 255, 255, .06); color: var(--t2); }
#wdd .wdd-chip--req { background: rgba(255, 126, 1, .13); color: var(--orange-t); }
#wdd .wdd-chip--opt { padding: 0 2px; color: var(--t3); font-weight: 500; }

#wdd .wdd-param-desc {
	margin-top: 8px;
	font-size: 14px;
	line-height: 1.65;
}

#wdd .wdd-param-desc .wdd-md-h { font-size: 14px; margin-top: 16px; }

#wdd .wdd-pmeta {
	display: grid;
	gap: 8px;
	margin-top: 12px;
}

#wdd .wdd-pmeta-row {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr);
	align-items: baseline;
	gap: 12px;
}

#wdd .wdd-pmeta dt {
	color: var(--t3);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.9;
}

#wdd .wdd-pmeta dd {
	min-width: 0;
	color: var(--t2);
	font-size: 14px;
	line-height: 1.6;
}

#wdd .wdd-vals {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

#wdd code.wdd-val.wdd-val {
	display: inline-block;
	max-width: 100%;
	padding: 2px 7px;
	border: 1px solid var(--line);
	border-radius: 6px;
	background: rgba(255, 255, 255, .05);
	color: var(--t1);
	font-size: 13px;
	line-height: 1.5;
	overflow-wrap: anywhere;
}

/* Campos filhos (objeto ou lista de objetos) */
#wdd .wdd-kids {
	margin-top: 14px;
	border: 1px solid var(--line);
	border-radius: var(--r);
	background: rgba(255, 255, 255, .015);
}

#wdd .wdd-kids > summary {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 8px 14px;
	border-radius: var(--r);
	color: var(--t1);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	transition: background-color .15s ease;
}

#wdd .wdd-kids > summary:hover { background: rgba(255, 255, 255, .03); }

#wdd .wdd-kids-i {
	width: 16px;
	height: 16px;
	color: var(--t3);
	transition: transform .18s ease;
}

#wdd .wdd-kids[open] > summary .wdd-kids-i { transform: rotate(90deg); }
#wdd .wdd-kids[open] > summary { border-bottom: 1px solid var(--line); border-radius: var(--r) var(--r) 0 0; }

#wdd .wdd-kids > .wdd-params {
	margin: 0;
	padding: 0 16px;
	border-top: 0;
}

#wdd .wdd-kids > .wdd-params > .wdd-param:last-child { border-bottom: 0; }

/* Respostas e erros da rota */
#wdd .wdd-resps {
	display: grid;
	gap: 0;
	margin-top: 14px;
	border-top: 1px solid var(--line);
}

#wdd .wdd-resps li {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	align-items: baseline;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--line);
	font-size: 14px;
	line-height: 1.6;
}

#wdd .wdd-resps-t { min-width: 0; color: var(--t2); }

#wdd .wdd-errlist {
	margin-top: 32px;
	border: 1px solid var(--line);
	border-radius: var(--r);
	background: var(--s1);
}

#wdd .wdd-errlist > summary {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 52px;
	padding: 8px 16px;
	border-radius: var(--r);
	color: var(--t1);
	font-size: 16px;
	font-weight: 700;
	transition: background-color .15s ease;
}

#wdd .wdd-errlist > summary > span { flex: 1; display: inline-flex; align-items: center; gap: 10px; }
#wdd .wdd-errlist > summary:hover { background: rgba(255, 255, 255, .025); }
#wdd .wdd-errlist-i { width: 18px; height: 18px; color: var(--amber); }
#wdd .wdd-errlist[open] > summary { border-bottom: 1px solid var(--line); border-radius: var(--r) var(--r) 0 0; }

#wdd .wdd-errlist-ul { padding: 6px; }

#wdd .wdd-errlist-ul a {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	align-items: center;
	gap: 4px 12px;
	min-height: 44px;
	padding: 8px 10px;
	border-radius: var(--r-sm);
	color: var(--t2);
	text-decoration: none;
	transition: background-color .15s ease;
}

#wdd .wdd-errlist-ul a:hover { background: rgba(255, 255, 255, .04); }

#wdd .wdd-errlist-ul code {
	justify-self: start;
	max-width: 100%;
	font-size: 13px;
}

#wdd .wdd-errlist-t {
	grid-column: 2;
	color: var(--t3);
	font-size: 14px;
	line-height: 1.4;
}

@container main (min-width: 1200px) {
	#wdd .wdd-errlist-ul a { grid-template-columns: 44px minmax(0, auto) minmax(0, 1fr); }
	#wdd .wdd-errlist-t { grid-column: auto; }
}

/* Coluna do código */
#wdd .wdd-code-title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 10px;
	color: var(--t3);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
}

#wdd .wdd-code-title ~ .wdd-code-title { margin-top: 24px; }
#wdd .wdd-ep-code .wdd-callout { margin-top: 0; }

/* ============================================================
 * Rodapé
 * ============================================================ */

#wdd .wdd-foot {
	margin-top: 120px;
	padding: 40px 0 56px;
	border-top: 1px solid var(--line);
}

#wdd .wdd-foot-in {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 32px;
	color: var(--t3);
	font-size: 14px;
}

#wdd .wdd-foot-logo { width: auto; height: 22px; }
#wdd .wdd-foot-in p { flex: 1 1 320px; }

#wdd .wdd-foot-links {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 20px;
}

#wdd .wdd-foot-links a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	color: var(--t2);
	text-decoration: none;
}

#wdd .wdd-foot-links a:hover { color: #fff; }

/* ============================================================
 * Busca (paleta)
 * ============================================================ */

#wdd .wdd-pal {
	position: fixed;
	inset: 0;
	z-index: 120;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	padding: 12vh 16px 16px;
}

#wdd .wdd-pal-scrim {
	position: absolute;
	inset: 0;
	background: rgba(1, 6, 4, .72);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

#wdd .wdd-pal-box {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 680px;
	max-height: min(640px, 80vh);
	overflow: hidden;
	border: 1px solid var(--line-2);
	border-radius: var(--r-lg);
	background: var(--s1);
}

@media (prefers-reduced-motion: no-preference) {
	#wdd .wdd-pal:not([hidden]) .wdd-pal-box { animation: wdd-rise .18s ease both; }
	#wdd .wdd-pal:not([hidden]) .wdd-pal-scrim { animation: wdd-fade .18s ease both; }
}

#wdd .wdd-pal-field {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: none;
	height: 64px;
	padding: 0 12px 0 20px;
	border-bottom: 1px solid var(--line);
}

#wdd .wdd-pal-si { width: 20px; height: 20px; color: var(--green); }

#wdd .wdd-pal-input {
	flex: 1;
	min-width: 0;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: #fff;
	border-radius: 0;
	font-family: var(--sans);
	font-size: 18px;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}

#wdd .wdd-pal-input::placeholder { color: var(--t3); }
#wdd .wdd-pal-input:focus { outline: none; border: 0; box-shadow: none; }

#wdd .wdd-pal-esc {
	min-height: 32px;
	padding: 0 10px;
	border: 1px solid var(--line-2);
	border-radius: 8px;
	color: var(--t3);
	font-size: 12px;
	font-weight: 600;
}

#wdd .wdd-pal-esc:hover,
#wdd .wdd-pal-esc:focus-visible { border-color: rgba(255, 255, 255, .3); color: #fff; }

#wdd .wdd-pal-body {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding: 8px;
	overscroll-behavior: contain;
	scrollbar-width: thin;
}

#wdd .wdd-pal-group {
	padding: 12px 12px 6px;
	color: var(--t3);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
}

#wdd .wdd-pal-item a {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr) 16px;
	align-items: center;
	gap: 12px;
	min-height: 52px;
	padding: 10px 12px;
	border-radius: var(--r);
	color: var(--t2);
	text-decoration: none;
}

#wdd .wdd-pal-item[aria-selected='true'] a {
	background: var(--green-tint);
	color: #fff;
}

#wdd .wdd-pal-ic {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	min-height: 28px;
	color: var(--t3);
}

#wdd .wdd-pal-ic .wdd-i { width: 18px; height: 18px; }

#wdd .wdd-pal-txt { min-width: 0; }

#wdd .wdd-pal-t {
	display: block;
	color: var(--t1);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
}

#wdd .wdd-pal-s {
	display: block;
	margin-top: 2px;
	color: var(--t3);
	font-size: 13px;
	line-height: 1.4;
	overflow-wrap: anywhere;
}

#wdd .wdd-pal-s.is-mono { font-family: var(--mono); }

#wdd .wdd-pal-go {
	width: 16px;
	height: 16px;
	color: var(--t3);
	opacity: 0;
}

#wdd .wdd-pal-item[aria-selected='true'] .wdd-pal-go { opacity: 1; color: var(--green); }

#wdd .wdd-pal mark {
	padding: 0 1px;
	border-radius: 3px;
	background: rgba(37, 211, 102, .25);
	color: #fff;
}

#wdd .wdd-pal-empty,
#wdd .wdd-pal-hints { padding: 16px 12px 12px; color: var(--t3); font-size: 14px; }

#wdd .wdd-pal-empty-t { color: var(--t1); font-size: 16px; margin-bottom: 4px; }

#wdd .wdd-pal-hints-t {
	margin-bottom: 10px;
	color: var(--t3);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
}

#wdd .wdd-pal-empty + .wdd-pal-hints { padding-top: 0; }
#wdd .wdd-pal-empty + .wdd-pal-hints .wdd-pal-hints-t { display: none; }

#wdd .wdd-pal-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

#wdd .wdd-pal-chip {
	min-height: 36px;
	padding: 0 14px;
	border: 1px solid var(--line-2);
	border-radius: 999px;
	color: var(--t2);
	font-size: 14px;
	font-weight: 500;
}

#wdd .wdd-pal-chip:hover,
#wdd .wdd-pal-chip:focus-visible {
	border-color: rgba(37, 211, 102, .5);
	background-color: var(--green-tint);
	color: #fff;
}

#wdd .wdd-pal-foot {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	flex: none;
	padding: 12px 20px;
	border-top: 1px solid var(--line);
	color: var(--t3);
	font-size: 13px;
}

#wdd .wdd-pal-foot span { display: inline-flex; align-items: center; gap: 4px; }

@media (max-width: 599px) {
	#wdd .wdd-pal { padding: 8px; }
	#wdd .wdd-pal-box { max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); }
	#wdd .wdd-pal-foot { display: none; }
}

/* ============================================================
 * Voltar ao topo: botão da barra (nunca flutua sobre o conteúdo)
 *
 * A partir de 1280 px o sumário "Nesta página" já tem o atalho, então o
 * botão só existe abaixo disso, e só aparece depois de duas telas.
 * ============================================================ */

#wdd a.wdd-topbtn {
	color: var(--t2);
	text-decoration: none;
}

@media (min-width: 1280px) {
	#wdd a.wdd-topbtn { display: none !important; }
}

/* Gaveta ou busca aberta: a página atrás não rola. */
html.wdd-lock { overflow: hidden; }

/*
 * Sem a barra de rolagem, a página ficaria mais larga e pularia de lugar.
 * O script só põe esta classe quando a barra ocupa espaço de verdade.
 */
html.wdd-lock.wdd-lock-gutter { scrollbar-gutter: stable; }

@media (prefers-reduced-motion: reduce) {
	#wdd *,
	#wdd *::before,
	#wdd *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}


#wdd .wdd-sprite {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

#wdd .wdd-nobr { white-space: nowrap; }

/* O " \" de continuação do cURL nunca desce sozinho para a linha de baixo. */
#wdd .wdd-nb { white-space: nowrap; }

/* Lista de rotas fora do texto corrido (linhas de definição): alvo de 40 px. */
#wdd .wdd-row dd .wdd-xrefs a.wdd-xref { min-height: 40px; padding: 0 10px 0 6px; }

/* ============================================================
 * Seletor de exemplo de uma rota: uma linha, abre uma lista
 * ============================================================ */

#wdd .wdd-exsel {
	border-bottom: 1px solid var(--line);
	background: var(--code-bar);
}

#wdd .wdd-exsel-btn {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-height: 48px;
	padding: 4px 14px;
	color: var(--t1);
	font-size: 14px;
	text-align: left;
	transition: background-color .15s ease;
}

#wdd .wdd-exsel-btn:hover,
#wdd .wdd-exsel-btn:focus-visible,
#wdd .wdd-exsel-btn[aria-expanded='true'] { background-color: rgba(255, 255, 255, .035); }

#wdd .wdd-exsel-btn:focus-visible { outline-offset: -3px; }

#wdd .wdd-exsel-k {
	flex: none;
	color: var(--t3);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

#wdd .wdd-exsel-v {
	flex: 1;
	min-width: 0;
	color: #fff;
	font-weight: 600;
	line-height: 1.35;
}

#wdd .wdd-exsel-n {
	flex: none;
	color: var(--t3);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

#wdd .wdd-exsel-i {
	width: 16px;
	height: 16px;
	color: var(--t3);
	transition: transform .18s ease;
}

#wdd .wdd-exsel-btn[aria-expanded='true'] .wdd-exsel-i { transform: rotate(180deg); }

#wdd .wdd-exsel-list {
	max-height: 288px;
	margin: 0 8px 8px;
	padding: 4px;
	overflow-y: auto;
	border: 1px solid var(--line-2);
	border-radius: var(--r-sm);
	background: var(--s2);
	overscroll-behavior: contain;
	scrollbar-width: thin;
}

#wdd .wdd-exsel-list:focus { outline: none; }
#wdd .wdd-exsel-list:focus-visible { outline: 2px solid var(--green-2); outline-offset: 2px; }

#wdd .wdd-exsel-opt {
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr) 16px;
	align-items: center;
	gap: 10px;
	min-height: 40px;
	padding: 8px 10px;
	border-radius: 6px;
	color: var(--t2);
	font-size: 14px;
	line-height: 1.35;
	cursor: pointer;
}

#wdd .wdd-exsel-opt.is-active { background: rgba(255, 255, 255, .06); color: #fff; }
#wdd .wdd-exsel-opt[aria-selected='true'] { color: #fff; font-weight: 600; }

#wdd .wdd-exsel-on {
	color: var(--t3);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	text-align: right;
}

#wdd .wdd-exsel-ok {
	width: 16px;
	height: 16px;
	color: var(--green);
	opacity: 0;
}

#wdd .wdd-exsel-opt[aria-selected='true'] .wdd-exsel-ok { opacity: 1; }

/* ============================================================
 * Parâmetro condicional e regras da rota
 * ============================================================ */

#wdd .wdd-chip--cond {
	background: rgba(142, 203, 255, .12);
	color: var(--blue);
}

#wdd .wdd-cond {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-top: 8px;
	color: #cfe6ff;
	font-size: 14px;
	line-height: 1.55;
	overflow-wrap: anywhere;
}

#wdd .wdd-cond-i {
	width: 16px;
	height: 16px;
	margin-top: 3px;
	color: var(--blue);
}

#wdd .wdd-rules {
	display: grid;
	gap: 8px;
	margin-top: 12px;
}

#wdd .wdd-rules li {
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr);
	gap: 10px;
	padding: 12px 14px;
	border: 1px solid var(--line);
	border-radius: var(--r);
	background: var(--s1);
	color: var(--t1);
	font-size: 14px;
	line-height: 1.55;
}

#wdd .wdd-rules-i {
	width: 24px;
	height: 24px;
	padding: 5px;
	border-radius: 50%;
	background: var(--green-tint);
	color: var(--green);
	stroke-width: 2.4;
}

/* ============================================================
 * Abertura de cada grupo da referência
 * ============================================================ */

#wdd .wdd-gintro {
	margin-top: 24px;
	padding: 24px;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--s1);
}

#wdd .wdd-gintro > .wdd-prose { font-size: 16px; }
#wdd .wdd-gintro .wdd-common { margin-top: 28px; }
#wdd .wdd-gintro .wdd-common > .wdd-h4 { font-size: 18px; }

@media (max-width: 599px) {
	#wdd .wdd-gintro { padding: 16px; }
}

/* Listas de rotas (depois de dois-pontos, fora da frase): alvo de 40 px. */
#wdd .wdd-xrefs a.wdd-xref {
	min-height: 40px;
	margin: 4px 6px 4px 0;
	padding: 0 10px 0 6px;
}

/* Bloco estreito: o nome do exemplo ganha a linha toda (o rótulo some, o "2 de 10" fica). */
@container code (max-width: 420px) {
	#wdd .wdd-exsel-k { display: none; }
}