/* Shell de navegacao do blog iSol — header, drawer, rodape, i18n de interface.
   Carregado pelas 34 paginas; ajuste aqui vale para todas. */
:root{--bsh-h:60px}
.bsh-top{position:sticky;top:0;z-index:120;background:rgba(9,26,44,.92);
  -webkit-backdrop-filter:saturate(160%) blur(12px);backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid rgba(52,195,240,.16)}
.bsh-in{max-width:1120px;margin:0 auto;padding:0 20px;height:var(--bsh-h);display:flex;align-items:center;gap:18px}
/* Os rotulos em portugues sao mais longos que os em ingles: com 1120px o
   ultimo item do menu ("Provas em producao") sobrava por 32px e vivia
   esmaecido. Em tela larga o cabecalho ganha 80px alem da coluna de texto,
   o que basta nos dois idiomas. */
@media (min-width:1200px){.bsh-in{max-width:1200px}}
.bsh-brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none;flex:0 0 auto}
.bsh-brand img{display:block;filter:drop-shadow(0 0 10px rgba(52,195,240,.45))}
.bsh-brand b{font-family:Sora,sans-serif;font-size:19px;font-weight:700;color:#fff;letter-spacing:-.01em}
.bsh-brand:hover b{color:#34C3F0}
/* O menu tinha `min-width:0` e nada de overflow: quando os itens nao cabiam, eles
   transbordavam POR BAIXO do seletor de idioma e do botao, e as palavras saiam
   cortadas ("Proof in produ"). Acontecia em 1024, 1280 e 1440 — o excesso era de
   46 a 66px. Agora o menu rola em vez de transbordar, e um esmaecimento na
   direita avisa que ha mais (classe posta pelo blog-shell.js). O espacamento mais
   justo faz caber sem rolar na maioria das larguras. */
.bsh-nav{display:flex;gap:2px;margin-left:6px;flex:1 1 auto;min-width:0;
  overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth}
.bsh-nav::-webkit-scrollbar{display:none}
.bsh-nav.tem-mais{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 44px),transparent 100%);
  mask-image:linear-gradient(to right,#000 calc(100% - 44px),transparent 100%)}
.bsh-nav a{font-size:14px;font-weight:500;color:#c3d4e4;text-decoration:none;padding:8px 8px;border-radius:8px;white-space:nowrap}
.bsh-nav a:hover{color:#fff;background:rgba(52,195,240,.12)}
.bsh-nav a[aria-current]{color:#7dd3fc;background:rgba(52,195,240,.14)}
.bsh-act{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.bsh-langs{display:inline-flex;border:1px solid rgba(125,211,252,.32);border-radius:999px;overflow:hidden;background:rgba(52,195,240,.07)}
.bsh-langs button{display:inline-flex;align-items:center;gap:6px;background:none;border:0;cursor:pointer;
  font:600 12px/1 'IBM Plex Sans',sans-serif;letter-spacing:.04em;color:#a9c0d4;padding:8px 11px}
.bsh-langs button img{display:block;border-radius:2px}
.bsh-langs button[aria-pressed="true"]{background:#1B9DE0;color:#fff}
.bsh-langs button:hover:not([aria-pressed="true"]){color:#fff;background:rgba(52,195,240,.16)}
.bsh-cta{display:inline-flex;align-items:center;background:#1B9DE0;color:#fff;text-decoration:none;
  font:600 13.5px/1 'IBM Plex Sans',sans-serif;padding:10px 15px;border-radius:9px;white-space:nowrap}
.bsh-cta:hover{background:#34C3F0}
.bsh-mbtn{display:none;align-items:center;gap:7px;background:rgba(52,195,240,.12);border:1px solid rgba(125,211,252,.34);
  color:#e6f2fb;border-radius:9px;padding:9px 12px;cursor:pointer;font:600 13px/1 'IBM Plex Sans',sans-serif}
.bsh-mbtn svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}
.bsh-mbtn:hover{background:rgba(52,195,240,.2)}
/* Ate 1080px o menu esconderia quase metade dos itens atras da rolagem, o que
   e pior do que a gaveta. Era 1000px; subiu para 1080 depois de medir quanto
   ficava escondido em cada largura (178px em 1024, 22 a 52px em 1100). */
@media (max-width:1080px){.bsh-nav{display:none}.bsh-mbtn{display:inline-flex}.bsh-cta{display:none}}
@media (max-width:420px){.bsh-langs button b{display:none}.bsh-in{gap:10px;padding:0 14px}}

/* barra de progresso de leitura */
.bsh-prog{position:fixed;top:0;left:0;height:3px;width:0;z-index:130;
  background:linear-gradient(90deg,#1B9DE0,#34C3F0);transition:width .1s linear}

/* gaveta */
.bsh-dr{position:fixed;inset:0;z-index:200;visibility:hidden;pointer-events:none}
.bsh-dr[data-open="1"]{visibility:visible;pointer-events:auto}
.bsh-dr-bg{position:absolute;inset:0;background:rgba(4,14,26,.66);opacity:0;transition:opacity .22s}
.bsh-dr[data-open="1"] .bsh-dr-bg{opacity:1}
.bsh-dr-p{position:absolute;top:0;right:0;height:100%;width:min(360px,90vw);overflow-y:auto;
  background:#0b2036;border-left:1px solid rgba(52,195,240,.2);padding:18px 20px 34px;
  transform:translateX(100%);transition:transform .26s cubic-bezier(.4,0,.2,1)}
.bsh-dr[data-open="1"] .bsh-dr-p{transform:none}
.bsh-dr-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.bsh-dr-top b{font-family:Sora,sans-serif;font-size:18px;color:#fff}
.bsh-x{background:none;border:0;color:#a9c0d4;font-size:30px;line-height:1;cursor:pointer;padding:0 4px}
.bsh-x:hover{color:#fff}
.bsh-g{margin-top:18px}
.bsh-g h5{font:600 11px/1 'JetBrains Mono',monospace;letter-spacing:.13em;text-transform:uppercase;
  color:#7dd3fc;margin:0 0 8px}
.bsh-g a{display:flex;justify-content:space-between;gap:12px;align-items:baseline;
  color:#dbe8f4;text-decoration:none;font-size:14.5px;padding:9px 10px;border-radius:8px;margin:0 -10px}
.bsh-g a:hover{background:rgba(52,195,240,.13);color:#fff}
.bsh-g a em{font-style:normal;font-size:11.5px;color:#8ba7c0;white-space:nowrap}
.bsh-dr .bsh-cta{display:flex;justify-content:center;margin-top:22px;width:100%}

/* faixa de idioma do artigo */
.bsh-langnote{max-width:720px;margin:14px auto 0;padding:11px 16px;border-radius:10px;
  background:rgba(52,195,240,.09);border:1px solid rgba(125,211,252,.3);
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:13.5px;color:#dbe8f4}
.bsh-langnote svg{width:16px;height:16px;stroke:#7dd3fc;stroke-width:2;fill:none;flex:0 0 auto}
.bsh-langnote a{color:#7dd3fc;font-weight:600}
@media (max-width:760px){.bsh-langnote{margin:14px 20px 0}}

/* selo de idioma nos cards do indice */
.bsh-pill{display:inline-flex;align-items:center;gap:5px;font:600 10.5px/1 'JetBrains Mono',monospace;
  letter-spacing:.08em;color:#7dd3fc;background:rgba(52,195,240,.12);
  border:1px solid rgba(125,211,252,.3);border-radius:999px;padding:4px 8px;vertical-align:middle}
.bsh-pill img{display:block;border-radius:2px}

/* filtros do indice */
.bsh-filters{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 4px}
.bsh-filters button{background:rgba(52,195,240,.08);border:1px solid rgba(125,211,252,.26);color:#c3d4e4;
  border-radius:999px;padding:8px 14px;cursor:pointer;font:600 13px/1 'IBM Plex Sans',sans-serif}
.bsh-filters button:hover{color:#fff;background:rgba(52,195,240,.16)}
.bsh-filters button[aria-pressed="true"]{background:#1B9DE0;border-color:#1B9DE0;color:#fff}
.bsh-empty{color:#a9c0d4;font-size:15px;padding:26px 0}

/* navegacao anterior/proximo + relacionados */
.bsh-next{max-width:720px;margin:44px auto 0;padding:0 20px;display:grid;gap:12px;grid-template-columns:1fr 1fr}
@media (max-width:640px){.bsh-next{grid-template-columns:1fr}}
.bsh-next a{display:block;padding:15px 17px;border-radius:12px;text-decoration:none;
  background:rgba(52,195,240,.06);border:1px solid rgba(125,211,252,.22)}
.bsh-next a:hover{background:rgba(52,195,240,.13);border-color:rgba(125,211,252,.4)}
.bsh-next span{display:block;font:600 10.5px/1 'JetBrains Mono',monospace;letter-spacing:.11em;
  text-transform:uppercase;color:#7dd3fc;margin-bottom:7px}
.bsh-next b{display:block;font-family:Sora,sans-serif;font-size:15px;font-weight:600;color:#eaf3fb;line-height:1.35}
.bsh-next a:hover b{color:#fff}

/* rodape */
.bsh-foot{border-top:1px solid rgba(52,195,240,.16);margin-top:56px;background:rgba(7,22,38,.6)}
.bsh-foot-in{max-width:1120px;margin:0 auto;padding:34px 20px 26px;
  display:grid;gap:26px;grid-template-columns:1.3fr 1fr 1fr 1fr}
@media (max-width:860px){.bsh-foot-in{grid-template-columns:1fr 1fr;gap:22px}}
@media (max-width:480px){.bsh-foot-in{grid-template-columns:1fr}}
.bsh-foot h5{font:600 11px/1 'JetBrains Mono',monospace;letter-spacing:.13em;text-transform:uppercase;
  color:#7dd3fc;margin:0 0 11px}
.bsh-foot a{display:block;color:#c3d4e4;text-decoration:none;font-size:14px;padding:5px 0}
.bsh-foot a:hover{color:#fff}
.bsh-foot-tag{color:#b9cbdd;font-size:13.5px;line-height:1.6;margin:10px 0 0;max-width:30ch}
.bsh-foot-bot{max-width:1120px;margin:0 auto;padding:0 20px 26px;border-top:1px solid rgba(52,195,240,.1);
  padding-top:16px;display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;
  color:#9db3c8;font-size:12.5px}
.bsh-foot-bot a{display:inline;color:#9db3c8}
.bsh-addr{display:flex;flex-wrap:wrap;gap:4px 18px}
.bsh-addr span{display:inline-flex;align-items:center;gap:6px}
.bsh-addr img{display:block;border-radius:2px}

/* voltar ao topo */
.bsh-top-btn{position:fixed;right:18px;bottom:18px;z-index:110;width:42px;height:42px;border-radius:50%;
  background:rgba(11,32,54,.92);border:1px solid rgba(125,211,252,.34);color:#dbe8f4;cursor:pointer;
  display:none;align-items:center;justify-content:center;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.bsh-top-btn[data-on="1"]{display:flex}
.bsh-top-btn:hover{background:#1B9DE0;color:#fff;border-color:#1B9DE0}
.bsh-top-btn svg{width:19px;height:19px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.bsh-pill[hidden]{display:none}
.bsh-dr .bsh-cta2{margin-top:10px;background:transparent;border:1px solid rgba(125,211,252,.4);color:#dbe8f4}
.bsh-dr .bsh-cta2:hover{background:rgba(52,195,240,.14);color:#fff}

/* barra inferior no celular — mesmo modelo do site */
.bsh-bn{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;
  background:rgba(6,22,39,.97);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-top:1px solid rgba(52,195,240,.3);
  padding:6px 8px calc(6px + env(safe-area-inset-bottom));
  grid-template-columns:1fr 1fr 1.25fr 1fr 1fr;gap:2px}
.bsh-bn a{display:flex;flex-direction:column;align-items:center;gap:3px;text-decoration:none;
  color:#9db3c8;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.02em;
  padding:6px 2px;border-radius:10px;min-height:52px;justify-content:center}
.bsh-bn a span{white-space:nowrap}
.bsh-bn a svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.bsh-bn a.act{color:#34C3F0}
.bsh-bn a.go{position:relative;color:#04263f;font-weight:700;font-family:Sora,sans-serif;font-size:11px;
  background:linear-gradient(135deg,#34C3F0,#1B9DE0);border-radius:14px;margin-top:-16px;min-height:64px;
  box-shadow:0 10px 26px -8px rgba(52,195,240,.65);border:2px solid rgba(255,255,255,.18)}
.bsh-bn a.go svg{stroke:#04263f;width:22px;height:22px}
@media (max-width:760px){
  .bsh-bn{display:grid}
  body{padding-bottom:84px}
  .bsh-top-btn{bottom:calc(96px + env(safe-area-inset-bottom))}
}
/* idioma ativo tem que ser obvio mesmo sem rotulo visivel */
.bsh-langs button{position:relative;opacity:.62;filter:grayscale(.5)}
.bsh-langs button[aria-pressed="true"]{opacity:1;filter:none}
.bsh-langs button:hover{opacity:1;filter:none}
/* evita o piscar do texto original antes da traducao entrar */
.blog-article[data-translating="1"]{opacity:.35;transition:opacity .12s}

/* ============ documentacao: barra lateral, indice e pagina de entrada ============ */
.docs-side{display:none}
.docs-toc{display:none}

@media (min-width:1080px){
  /* tres colunas: arvore, conteudo, indice da pagina */
  body.has-docs-side .blog-article,
  body.has-docs-side .blog-list{margin-left:auto;margin-right:auto}
  .docs-side{display:block;position:fixed;top:var(--bsh-h);left:max(0px,calc(50% - 620px));
    width:266px;height:calc(100dvh - var(--bsh-h));overflow-y:auto;overscroll-behavior:contain;
    padding:22px 14px 40px;border-right:1px solid rgba(52,195,240,.14)}
  body.has-docs-side .blog-article,
  body.has-docs-side .blog-list{margin-left:calc(50% - 620px + 290px);margin-right:0;max-width:700px}
  body.has-docs-side.has-docs-toc .blog-article{max-width:640px}
  .docs-toc{display:block;position:fixed;top:calc(var(--bsh-h) + 22px);
    left:calc(50% - 620px + 290px + 672px);width:206px;max-height:calc(100dvh - var(--bsh-h) - 60px);
    overflow-y:auto;padding-left:16px;border-left:1px solid rgba(52,195,240,.14)}
}
@media (min-width:1080px) and (max-width:1340px){
  .docs-toc{display:none}
  .docs-side{left:16px}
  body.has-docs-side .blog-article,body.has-docs-side .blog-list{margin-left:306px}
}

.ds-pick{position:relative;margin-bottom:18px}
.ds-pick-b{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:rgba(52,195,240,.07);border:1px solid rgba(125,211,252,.28);border-radius:11px;
  padding:11px 13px;cursor:pointer;color:#eaf3fb;font:600 14px/1.2 'IBM Plex Sans',sans-serif}
.ds-pick-b:hover{background:rgba(52,195,240,.14);border-color:rgba(125,211,252,.45)}
.ds-pick-b svg{width:16px;height:16px;stroke:#7dd3fc;stroke-width:2;fill:none;flex:0 0 auto}
.ds-pick-b[aria-expanded="true"] svg{transform:rotate(180deg)}
.ds-pick-m{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:30;padding:6px;
  background:#0b2036;border:1px solid rgba(125,211,252,.3);border-radius:11px;
  box-shadow:0 18px 40px -12px rgba(2,10,20,.8)}
.ds-pick-m button{display:block;width:100%;text-align:left;background:none;border:0;cursor:pointer;
  color:#dbe8f4;font:500 14px/1.2 'IBM Plex Sans',sans-serif;padding:10px 11px;border-radius:8px}
.ds-pick-m button:hover{background:rgba(52,195,240,.14);color:#fff}
.ds-pick-m button[aria-current]{color:#7dd3fc;font-weight:600}

.ds-g{margin-bottom:20px}
.ds-g h5{font:600 11px/1 'JetBrains Mono',monospace;letter-spacing:.12em;text-transform:uppercase;
  color:#8fb3cc;margin:0 0 7px;padding:0 11px}
.ds-g a{display:flex;align-items:center;gap:10px;padding:8px 11px;border-radius:8px;
  color:#c3d4e4;text-decoration:none;font-size:14px;line-height:1.3}
.ds-g a svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.7;fill:none;
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;opacity:.72}
.ds-g a:hover{background:rgba(52,195,240,.11);color:#fff}
.ds-g a:hover svg{opacity:1}
.ds-g a[aria-current]{background:rgba(52,195,240,.16);color:#7dd3fc;font-weight:600}
.ds-g a[aria-current] svg{opacity:1;stroke:#34C3F0}
.ds-cta{display:block;text-align:center;margin-top:8px;padding:11px;border-radius:10px;
  background:#1B9DE0;color:#fff;text-decoration:none;font:600 13.5px/1 'IBM Plex Sans',sans-serif}
.ds-cta:hover{background:#34C3F0}

.docs-toc h5{font:600 11px/1 'JetBrains Mono',monospace;letter-spacing:.12em;text-transform:uppercase;
  color:#8fb3cc;margin:0 0 10px}
.docs-toc a{display:block;color:#a9c0d4;text-decoration:none;font-size:13.5px;line-height:1.45;
  padding:6px 0 6px 12px;border-left:2px solid transparent;margin-left:-14px}
.docs-toc a:hover{color:#fff}
.docs-toc a[aria-current]{color:#7dd3fc;border-left-color:#34C3F0}

/* ---- pagina de entrada da documentacao ---- */
.doc-lead{font-size:17px;line-height:1.7;color:#dbe8f4;margin:18px 0 8px}
.doc-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px 0 8px}
@media (max-width:640px){.doc-cards{grid-template-columns:1fr}}
.doc-card{display:block;padding:18px;border-radius:13px;text-decoration:none;
  background:rgba(52,195,240,.06);border:1px solid rgba(125,211,252,.2);transition:.15s}
.doc-card:hover{background:rgba(52,195,240,.12);border-color:rgba(125,211,252,.45);transform:translateY(-2px)}
.doc-card h3{font-family:Sora,sans-serif;font-size:16px;font-weight:600;color:#fff;margin:12px 0 6px}
.doc-card p{margin:0;font-size:14px;line-height:1.55;color:#b9cbdd}
.doc-ic{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;
  background:rgba(52,195,240,.14)}
.doc-ic svg{width:19px;height:19px;stroke:#34C3F0;stroke-width:1.8;fill:none;
  stroke-linecap:round;stroke-linejoin:round}

.doc-steps{list-style:none;counter-reset:st;padding:0;margin:18px 0 8px}
.doc-steps li{counter-increment:st;position:relative;padding:0 0 24px 52px}
.doc-steps li::before{content:counter(st);position:absolute;left:0;top:0;
  width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(52,195,240,.14);border:1px solid rgba(125,211,252,.35);
  color:#7dd3fc;font:600 14px/1 'JetBrains Mono',monospace}
.doc-steps li:not(:last-child)::after{content:"";position:absolute;left:16px;top:38px;bottom:6px;
  width:1px;background:rgba(125,211,252,.22)}
.doc-steps li b{display:block;font-family:Sora,sans-serif;font-size:16px;color:#fff;
  margin:5px 0 6px;font-weight:600}
.doc-steps li p{margin:0;font-size:15px;line-height:1.65;color:#c9d6e2}

.doc-code{position:relative;background:#061a2e;border:1px solid #14395c;border-radius:11px;
  padding:15px 16px;overflow-x:auto;margin:12px 0 18px}
.doc-code code{font-family:'JetBrains Mono',monospace;font-size:13px;line-height:1.6;
  color:#a5dcf7;white-space:pre;display:block}
.doc-copy{position:absolute;top:9px;right:9px;background:rgba(52,195,240,.12);
  border:1px solid rgba(125,211,252,.3);color:#c3d4e4;border-radius:7px;padding:5px 9px;
  cursor:pointer;font:600 11px/1 'JetBrains Mono',monospace;letter-spacing:.05em;opacity:0;transition:.15s}
.doc-code:hover .doc-copy,.doc-copy:focus{opacity:1}
.doc-copy:hover{background:#1B9DE0;color:#fff;border-color:#1B9DE0}

.doc-tools{display:flex;flex-wrap:wrap;gap:9px;margin:14px 0 20px}
.doc-tools a{padding:9px 15px;border-radius:999px;text-decoration:none;font-size:14px;font-weight:500;
  color:#dbe8f4;background:rgba(52,195,240,.08);border:1px solid rgba(125,211,252,.24)}
.doc-tools a:hover{background:rgba(52,195,240,.18);border-color:rgba(125,211,252,.5);color:#fff}
.doc-help{margin-top:30px;padding:16px 18px;border-radius:12px;font-size:14.5px;color:#dbe8f4;
  background:rgba(52,195,240,.07);border:1px solid rgba(125,211,252,.22)}
.doc-help a{color:#7dd3fc;font-weight:600}
/* arvore de documentacao dentro da gaveta (celular) */
.bsh-dr-docs{margin:14px 0 4px;padding-bottom:14px;border-bottom:1px solid rgba(52,195,240,.16)}
.bsh-dr-docs-t{font:600 11px/1 'JetBrains Mono',monospace;letter-spacing:.13em;text-transform:uppercase;
  color:#34C3F0;margin:0 0 10px}
.bsh-dr-docs .ds-g{margin-bottom:14px}
.bsh-dr-docs .ds-g a{margin:0 -10px}
/* com a barra lateral de documentacao, a faixa de idioma tem que seguir a coluna
   de conteudo em vez de se centralizar na pagina inteira e invadir o indice */
@media (min-width:1080px){
  body.has-docs-side .bsh-langnote{margin-left:calc(50% - 620px + 290px);margin-right:0}
  body.has-docs-side.has-docs-toc .bsh-langnote{max-width:640px}
}
@media (min-width:1080px) and (max-width:1340px){
  body.has-docs-side .bsh-langnote{margin-left:306px}
}

/* ---- busca (Ctrl/Cmd+K) ---- */
.ds-search{width:100%;display:flex;align-items:center;gap:9px;margin-bottom:12px;
  background:rgba(52,195,240,.05);border:1px solid rgba(125,211,252,.22);border-radius:11px;
  padding:10px 12px;cursor:pointer;color:#9db3c8;font:500 13.5px/1.2 'IBM Plex Sans',sans-serif;
  text-align:left}
.ds-search:hover{background:rgba(52,195,240,.12);border-color:rgba(125,211,252,.42);color:#dbe8f4}
.ds-search svg{width:15px;height:15px;stroke:currentColor;stroke-width:2;fill:none;flex:0 0 auto}
.ds-search span{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ds-search kbd,.dsearch kbd{font:600 10.5px/1 'JetBrains Mono',monospace;color:#8fb3cc;
  background:rgba(125,211,252,.12);border:1px solid rgba(125,211,252,.24);border-radius:5px;
  padding:3px 5px;flex:0 0 auto}

.dsearch{position:fixed;inset:0;z-index:220;display:flex;align-items:flex-start;justify-content:center;
  padding:12vh 20px 20px}
.dsearch[hidden]{display:none}
.dsearch-bg{position:absolute;inset:0;background:rgba(4,14,26,.72);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.dsearch-box{position:relative;width:min(620px,100%);background:#0b2036;border-radius:15px;
  border:1px solid rgba(125,211,252,.3);box-shadow:0 30px 70px -20px rgba(2,10,20,.85);overflow:hidden}
.dsearch-top{display:flex;align-items:center;gap:11px;padding:15px 16px;
  border-bottom:1px solid rgba(52,195,240,.16)}
.dsearch-top svg{width:18px;height:18px;stroke:#7dd3fc;stroke-width:2;fill:none;flex:0 0 auto}
.dsearch-top input{flex:1 1 auto;background:none;border:0;outline:none;color:#eaf3fb;
  font:400 16px/1.3 'IBM Plex Sans',sans-serif;min-width:0}
.dsearch-top input::placeholder{color:#7f97ae}
.dsearch-top input::-webkit-search-cancel-button{display:none}
.dsearch-res{max-height:min(52vh,420px);overflow-y:auto;padding:8px}
.dsearch-res a{display:block;padding:11px 13px;border-radius:9px;text-decoration:none}
.dsearch-res a b{display:block;font:600 14.5px/1.35 'IBM Plex Sans',sans-serif;color:#eaf3fb}
.dsearch-res a span{display:block;font:400 12px/1.4 'JetBrains Mono',monospace;color:#8fb3cc;margin-top:3px}
.dsearch-res a:hover{background:rgba(52,195,240,.1)}
.dsearch-res a[aria-selected="true"]{background:rgba(52,195,240,.18)}
.dsearch-res a[aria-selected="true"] b{color:#fff}
.dsearch-none{color:#a9c0d4;font-size:14.5px;padding:20px 13px;margin:0}
.dsearch-foot{display:flex;gap:18px;padding:11px 16px;border-top:1px solid rgba(52,195,240,.14);
  color:#8fb3cc;font-size:11.5px}
.dsearch-foot span{display:inline-flex;align-items:center;gap:5px}
@media (max-width:520px){.dsearch{padding:8vh 12px 12px}.dsearch-foot{display:none}}

/* ---- pular para o conteudo ---- */
.skip-link{position:fixed;top:8px;left:8px;z-index:300;transform:translateY(-160%);
  background:#1B9DE0;color:#fff;padding:11px 18px;border-radius:9px;text-decoration:none;
  font:600 14px/1 'IBM Plex Sans',sans-serif;transition:transform .18s}
.skip-link:focus{transform:none}
#conteudo:focus{outline:none}

/* ---- ancora nos titulos ---- */
.blog-article h2,.blog-article h3{position:relative;scroll-margin-top:84px}
.h-anchor{display:inline-flex;align-items:center;margin-left:9px;opacity:0;
  vertical-align:middle;transition:opacity .15s}
.h-anchor svg{width:16px;height:16px;stroke:#7dd3fc;stroke-width:2;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
h2:hover .h-anchor,h3:hover .h-anchor,.h-anchor:focus{opacity:1}

/* ---- trilha ---- */
.docs-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin:0 0 14px;
  font:500 12.5px/1.4 'JetBrains Mono',monospace}
.docs-crumbs a{color:#7dd3fc;text-decoration:none}
.docs-crumbs a:hover{text-decoration:underline}
.docs-crumbs span{color:#5d7a94}
.docs-crumbs em{font-style:normal;color:#a9c0d4}

/* ---- alvo de toque do botao copiar (WCAG 2.2: minimo 24px) ---- */
.doc-copy{min-height:26px;min-width:52px;padding:6px 10px}
/* area clicavel das ancoras e da trilha (alvo minimo de 24px) */
.h-anchor{padding:5px;margin-left:4px}
.docs-crumbs a,.docs-crumbs em{display:inline-flex;align-items:center;min-height:24px}

/* ---- realce de sintaxe ---- */
.doc-code .t-cmd{color:#7dd3fc;font-weight:500}
.doc-code .t-flag{color:#c4b5fd}
.doc-code .t-str{color:#86efac}
.doc-code .t-var{color:#fbbf24}
.doc-code .t-cmt{color:#6b8299;font-style:italic}
.doc-code .t-kw{color:#f0abfc;font-weight:500}
.doc-code .t-key{color:#7dd3fc}
.doc-code .t-num{color:#fbbf24}
.doc-code .t-lit{color:#f0abfc}

/* ---- abas de linguagem ---- */
.doc-tabs{margin:12px 0 18px}
.doc-tablist{display:flex;gap:2px;border-bottom:1px solid rgba(52,195,240,.2);margin-bottom:-1px}
.doc-tablist button{background:none;border:0;border-bottom:2px solid transparent;cursor:pointer;
  color:#9db3c8;font:600 13px/1 'IBM Plex Sans',sans-serif;padding:10px 14px;min-height:38px;
  border-radius:8px 8px 0 0}
.doc-tablist button:hover{color:#dbe8f4;background:rgba(52,195,240,.08)}
.doc-tablist button[aria-selected="true"]{color:#7dd3fc;border-bottom-color:#34C3F0;
  background:rgba(52,195,240,.1)}
.doc-tabs .doc-code{margin-top:0;border-top-left-radius:0}
.doc-upd{color:#8fb3cc}
/* lupa no cabecalho: a busca precisa existir onde nao ha barra lateral nem teclado */
.bsh-sbtn{display:none;align-items:center;justify-content:center;width:40px;height:40px;
  background:rgba(52,195,240,.12);border:1px solid rgba(125,211,252,.34);color:#e6f2fb;
  border-radius:9px;cursor:pointer}
.bsh-sbtn svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none}
.bsh-sbtn:hover{background:rgba(52,195,240,.2)}
@media (max-width:1079px){.bsh-sbtn{display:inline-flex}}
.ds-search-dr{margin-bottom:14px}
.ds-search-dr kbd{display:none}

/* ---- tabela de referencia na documentacao ---- */
.doc-table-wrap{overflow-x:auto;margin:14px 0 18px;
  border:1px solid rgba(125,211,252,.22);border-radius:12px}
.doc-table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:520px}
.doc-table th{text-align:left;padding:11px 14px;background:rgba(52,195,240,.1);
  color:#7dd3fc;font:600 12px/1.3 'JetBrains Mono',monospace;letter-spacing:.06em;
  text-transform:uppercase;border-bottom:1px solid rgba(125,211,252,.22)}
.doc-table td{padding:12px 14px;color:#c9d6e2;line-height:1.55;vertical-align:top;
  border-bottom:1px solid rgba(52,195,240,.1)}
.doc-table tr:last-child td{border-bottom:0}
.doc-table td code{font-size:13px;color:#a5dcf7;background:rgba(6,26,46,.7);
  padding:2px 6px;border-radius:5px;white-space:nowrap}

/* ---- destaque de atencao na documentacao ---- */
.doc-note{margin:16px 0 20px;padding:15px 17px;border-radius:12px;
  background:rgba(251,191,36,.07);border:1px solid rgba(251,191,36,.28);
  border-left:3px solid #fbbf24;color:#e4edf5;font-size:15px;line-height:1.65}
.doc-note b{color:#fbbf24}
.doc-note code{font-family:'JetBrains Mono',monospace;font-size:13.5px;color:#ffd98a}

/* ---- blocos de pre-requisito e troubleshooting dos guias ---- */
.doc-pre-list{list-style:none;padding:0;margin:14px 0 20px;display:grid;gap:10px}
.doc-pre-list li{padding:13px 16px;border-radius:11px;font-size:15px;line-height:1.6;
  color:#c9d6e2;background:rgba(52,195,240,.06);border:1px solid rgba(125,211,252,.2)}
.doc-pre-list li b{color:#fff;font-weight:600}
.doc-pre-list li code{font-family:'JetBrains Mono',monospace;font-size:13.5px;color:#a5dcf7;
  background:rgba(6,26,46,.7);padding:2px 6px;border-radius:5px}
.doc-pre-list li a{color:#7dd3fc;font-weight:500}
.doc-err{margin-top:34px;padding-top:8px;border-top:1px solid rgba(52,195,240,.16)}
.doc-table td em{font-style:normal;color:#e4b96a}

/* ---- prova em producao: o que ja opera, separado do que e possibilidade ---- */
.doc-proof{margin:14px 0 20px;padding:15px 17px;border-radius:12px;
  background:rgba(52,211,153,.07);border:1px solid rgba(52,211,153,.26);
  border-left:3px solid #34d399;color:#dbe8f4;font-size:15px;line-height:1.65}
.doc-proof b{color:#6ee7b7}
.doc-proof a{color:#7dd3fc;font-weight:600}

/* ===== elementos didaticos: grade de areas, cartoes de prova, diagramas ===== */
.vg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin:18px 0 24px}
.vg-card{padding:18px;border-radius:13px;background:rgba(52,195,240,.05);
  border:1px solid rgba(125,211,252,.2)}
.vg-card h3{display:flex;align-items:center;gap:10px;margin:0 0 12px;
  font-family:Sora,sans-serif;font-size:16px;font-weight:600;color:#fff}
.vg-card h3 svg{width:20px;height:20px;stroke:#34C3F0;stroke-width:1.8;fill:none;
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.vg-card dl{margin:0;display:grid;gap:9px}
.vg-card dt{font:600 10.5px/1 'JetBrains Mono',monospace;letter-spacing:.1em;
  text-transform:uppercase;color:#8fb3cc}
.vg-card dd{margin:3px 0 0;font-size:14.5px;line-height:1.55;color:#c9d6e2}
.vg-card .vg-sov{color:#a5c8e0}
.vg-card .vg-sov::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:#34d399;margin-right:7px;vertical-align:middle}

/* cartoes de prova, com o numero em destaque */
.vg-proofs{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin:18px 0 10px}
.vg-proof{padding:18px;border-radius:13px;text-decoration:none;display:block;
  background:rgba(52,211,153,.06);border:1px solid rgba(52,211,153,.24)}
.vg-proof:hover{background:rgba(52,211,153,.12);border-color:rgba(52,211,153,.45);transform:translateY(-2px)}
.vg-proof{transition:.15s}
.vg-proof b{display:block;font-family:Sora,sans-serif;font-size:26px;font-weight:700;
  color:#6ee7b7;line-height:1.1}
.vg-proof i{display:block;font-style:normal;font:600 11px/1.3 'JetBrains Mono',monospace;
  letter-spacing:.08em;text-transform:uppercase;color:#8fb3cc;margin:7px 0 9px}
.vg-proof span{display:block;font-size:14px;line-height:1.55;color:#c9d6e2}
.vg-proof em{display:block;font-style:normal;margin-top:10px;font-size:13px;color:#7dd3fc;font-weight:600}

/* diagramas */
.vg-fig{margin:18px 0 24px}
.vg-fig svg{width:100%;height:auto;display:block}
.vg-fig figcaption{margin-top:10px;font-size:13.5px;line-height:1.55;color:#8fb3cc;text-align:center}
.vg-fig .fg-bg{fill:rgba(52,195,240,.06);stroke:rgba(125,211,252,.24)}
.vg-fig .fg-bg-on{fill:rgba(52,211,153,.1);stroke:rgba(52,211,153,.4)}
.vg-fig .fg-t{fill:#eaf3fb;font-family:'IBM Plex Sans',sans-serif;font-weight:600}
.vg-fig .fg-s{fill:#a9c0d4;font-family:'IBM Plex Sans',sans-serif}
.vg-fig .fg-n{fill:#7dd3fc;font-family:'JetBrains Mono',monospace;font-weight:600}
.vg-fig .fg-l{stroke:rgba(125,211,252,.4);fill:none;stroke-width:1.5}
.vg-fig .fg-a{fill:rgba(125,211,252,.55)}
.vg-fig .fg-ok{fill:#6ee7b7;font-family:'IBM Plex Sans',sans-serif;font-weight:600}

/* ---- grade compacta de casos de uso ---- */
.vg-cases{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:10px;margin:16px 0 24px}
.vg-cases a{display:block;padding:13px 15px;border-radius:11px;text-decoration:none;
  background:rgba(52,195,240,.05);border:1px solid rgba(125,211,252,.18);transition:.15s}
.vg-cases a:hover{background:rgba(52,195,240,.13);border-color:rgba(125,211,252,.45)}
.vg-cases b{display:block;font-family:Sora,sans-serif;font-size:14.5px;font-weight:600;color:#eaf3fb;line-height:1.35}
.vg-cases span{display:block;margin-top:5px;font:400 12px/1.4 'JetBrains Mono',monospace;color:#8fb3cc}
/* o texto dos cartoes de prova virou <p> para entrar na traducao */
.vg-proof p{margin:0;display:block;font-size:14px;line-height:1.55;color:#c9d6e2}
.doc-note p{margin:0}
.vg-cases p{display:block;margin:5px 0 0;font:400 12px/1.4 'JetBrains Mono',monospace;color:#8fb3cc}
.vg-proof .vg-proof-f{margin:10px 0 0;font-size:13px;color:#7dd3fc;font-weight:600}
/* na documentacao o mascote e presenca, nao evento: pequeno, ao lado do bloco de ajuda */
/* no bloco de ajuda do artigo: discreto, mas visivel sem procurar */
.isol-mascote-doc{width:130px;margin:0 0 -22px auto;display:block}
@media (max-width:760px){.isol-mascote-doc{width:104px;margin-bottom:-16px}}


/* ===== Guarda de composicao para navegador embutido (Instagram e afins) =====
   Sintoma: "Ocorreu um problema ao carregar esse site", que e a WebView
   reiniciando por falta de memoria. Ela nao tem o orcamento de um navegador
   normal, e o custo aqui nao e de rede nem de JS: e de CAMADA COMPOSTA.
   - backdrop-filter forca uma camada por elemento e obriga o compositor a
     reamostrar o fundo a cada quadro. Medido: 9 na home, 5 em /api/.
     Todas as regras que o usam ja declaram fundo solido (rgba .94 e .72),
     entao desligar o desfoque nao deixa nada transparente: perde-se so o
     efeito de vidro fosco, que no celular quase nao se percebe.
   - will-change promove camada. Medido: 45 elementos na home, numa pagina de
     28.000 px de altura.
   O !important e proposital: essas regras vivem em <style> inline espalhado
   por oito arquivos, e a guarda precisa vencer todas de uma vez. */
@media (max-width: 900px) {
  *, *::before, *::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  * { will-change: auto !important; }
}

/* 360px ou menos: o cabecalho passava 6px da tela e a pagina rolava para o lado */
@media (max-width:374px){
  .bsh-in{gap:8px;padding:0 12px}
  .bsh-act{gap:6px}
  .bsh-langs button{padding:8px 8px}
  .bsh-mbtn b{display:none}
  .bsh-mbtn{padding:9px 10px}
}