@font-face{font-family:"Archivo";src:url(fonts/archivo-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible Next";src:url(fonts/atkinson-hyperlegible-next-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible Next";src:url(fonts/atkinson-hyperlegible-next-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(fonts/jetbrains-mono-latin-wght-normal.woff2) format("woff2");font-weight:100 800;font-display:swap}
:root{--papel:#f5f6fa;--tinta:#151a33;--grafite:#575e78;--linha:#dce0eb;--cobalto:#2b4fe0;--sobre-cobalto:#fff;--marca:#ffd43b;--faixa:rgba(255,212,59,.55);color-scheme:light dark}
@media (prefers-color-scheme:dark){:root{--papel:#0e1120;--tinta:#eceef7;--grafite:#a3aac4;--linha:#2a3050;--cobalto:#7088ff;--sobre-cobalto:#0e1120;--faixa:rgba(255,212,59,.3)}}
body{margin:0;background:var(--papel);color:var(--tinta);font:400 1.125rem/1.6 "Atkinson Hyperlegible Next",system-ui,sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
h1,h2,h3{font-family:"Archivo","Arial Narrow",system-ui,sans-serif;font-weight:700;line-height:1.1;margin:0;text-wrap:balance}
h1{font-size:clamp(2rem,6vw,3.5rem);letter-spacing:-.01em}
h2{font-size:clamp(1.5rem,3.6vw,2.25rem);max-width:22ch}
h3{font-size:1.25rem;line-height:1.25}
p{margin:0}
a{color:var(--cobalto);text-underline-offset:.2em}
a:focus-visible,button:focus-visible,code:focus-visible,pre:focus-visible{outline:2px solid var(--cobalto);outline-offset:2px}
code,pre,.rotulo,.n{font-family:"JetBrains Mono",ui-monospace,Consolas,monospace}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px}
.skip:focus{left:20px;top:8px;background:var(--papel);padding:8px 12px;z-index:9}
.rotulo{font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:var(--grafite);margin:0 0 12px}
.marca{box-shadow:inset 0 -.45em 0 var(--faixa);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.apoio{color:var(--grafite);font-size:1rem}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px}
header img{height:26px;width:auto}
header .wrap>a{display:inline-flex;align-items:center;min-height:44px}
nav{display:flex;align-items:center;gap:2px}
nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;color:var(--tinta);font-size:1rem}
nav a[aria-current]{color:var(--cobalto);font-weight:700;text-decoration:none}
.lang{border-left:1px solid var(--linha);margin-left:4px;padding-left:4px;display:flex}
section{border-top:1px solid var(--linha);padding:56px 0}
.hero{border-top:0;padding:32px 0 56px}
.hero .wrap{display:grid;gap:28px}
.hero h1{margin-bottom:16px}
.hero p>a{display:inline-flex;align-items:center;min-height:44px}
.hero p.lead{max-width:34rem;margin-bottom:24px}
.cmd{display:flex;flex-direction:column;gap:12px;margin-bottom:12px}
.cmd code{display:block;overflow-x:auto;white-space:nowrap;padding:14px 16px;border:1px solid var(--linha);border-radius:3px;font-size:1rem;background:color-mix(in srgb,var(--cobalto) 6%,transparent)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;border-radius:3px;font:700 1rem "Atkinson Hyperlegible Next",system-ui,sans-serif;border:2px solid var(--cobalto);background:var(--cobalto);color:var(--sobre-cobalto);cursor:pointer;text-decoration:none}
.cmd .btn{width:100%}
.btn.contorno{background:transparent;color:var(--cobalto)}
.hero figure,.passo figure{margin:0}
.hero img{border:1px solid var(--linha);border-radius:3px}
.cols{display:grid;gap:28px;margin-top:32px}
.cols p{max-width:36rem}
.cols b{display:block;font-family:"Archivo",system-ui,sans-serif;font-size:1.25rem;margin-bottom:4px}
.passos{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:32px}
.passo img{border:1px solid var(--linha);border-radius:3px;margin-top:16px}
.n{color:var(--cobalto);font-weight:700}
.passo h3{margin-bottom:8px}
.nota{margin-top:24px}
pre{margin:0;overflow-x:auto;padding:16px;border:1px solid var(--linha);border-radius:3px;font-size:.875rem;line-height:1.5;background:color-mix(in srgb,var(--cobalto) 6%,transparent)}
.dois{display:grid;gap:28px}
.links{display:flex;flex-wrap:wrap;gap:4px 20px;margin-top:20px}
.links a{display:inline-flex;align-items:center;min-height:44px}
.final{text-align:left}
.final .cmd{max-width:34rem;margin-top:24px}
footer{border-top:1px solid var(--linha);padding:24px 0 40px;color:var(--grafite);font-size:1rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:4px 20px;align-items:center}
footer a{display:inline-flex;align-items:center;min-height:44px}
@media (min-width:960px){
.hero .wrap{grid-template-columns:5fr 7fr;align-items:center;gap:48px}
.final .cmd{flex-direction:row;align-items:stretch}
.final .cmd code{flex:1}
.final .cmd .btn{width:auto}
.cols{grid-template-columns:repeat(3,1fr)}
.passos{grid-template-columns:repeat(3,1fr)}
.dois{grid-template-columns:1fr 1fr;align-items:start}
section{padding:72px 0}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
@media (prefers-color-scheme:dark){.marca{box-shadow:inset 0 -.14em 0 var(--marca)}}
.hero h1 .marca{white-space:nowrap}
@media (min-width:960px){.hero h1{font-size:2.75rem}}
.hero h1 .marca:lang(en){white-space:normal}
/* seção "O que vem junto" e página de recursos */
.junto{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:0;border-top:1px solid var(--linha)}
.junto li{padding:20px 0;border-bottom:1px solid var(--linha)}
.junto h3{margin-bottom:6px}
.junto p{max-width:32rem}
.junto+p{margin-top:24px}
.junto+p a{display:inline-flex;align-items:center;min-height:44px}
.rec-topo{border-top:0;padding:40px 0 48px}
.rec-topo h1{max-width:18ch;margin-bottom:16px}
.rec-topo .lead{max-width:38rem}
.indice{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 20px;counter-reset:i;max-width:44rem}
.indice li{counter-increment:i;border-top:1px solid var(--linha)}
.indice a{display:flex;gap:10px;align-items:center;min-height:44px;color:var(--tinta);font-size:1rem;text-decoration:none}
.indice a::before{content:counter(i,decimal-leading-zero);font:700 .8125rem "JetBrains Mono",ui-monospace,Consolas,monospace;color:var(--cobalto)}
.indice a:hover{text-decoration:underline}
.rec .wrap{display:grid;gap:28px}
.rec .num{display:block;font:800 clamp(3rem,9vw,5.5rem)/.9 "Archivo","Arial Narrow",system-ui,sans-serif;color:var(--cobalto);margin-bottom:12px;letter-spacing:-.02em}
.rec h2{max-width:20ch;margin-bottom:16px}
.rec .txt>p{max-width:34rem}
.rec figure{margin:0}
.rec figure img{border:1px solid var(--linha);border-radius:3px;width:100%}
.rec figcaption{margin-top:10px;color:var(--grafite);font-size:1rem}
.det{list-style:none;margin:20px 0 0;padding:0;max-width:34rem}
.det li{padding:12px 0;border-top:1px solid var(--linha)}
.det b{font-family:"Archivo",system-ui,sans-serif}
.rec pre{margin-top:20px}
.fmts{display:grid;gap:12px;margin-top:20px;max-width:34rem}
.fmts div{display:flex;align-items:baseline;gap:14px;padding:12px 16px;border:1px solid var(--linha);border-radius:3px}
.fmts code{font-weight:700;color:var(--cobalto);min-width:3.5rem}
.rec.alt{background:color-mix(in srgb,var(--cobalto) 4%,transparent)}
.rec-final .cmd{max-width:34rem;margin-top:24px}
.rec-final h2{max-width:24ch}
@media (min-width:960px){
.junto{grid-template-columns:repeat(2,1fr);column-gap:32px}
.junto li{padding:24px 0}
.indice{grid-template-columns:repeat(4,1fr)}
.rec .wrap{grid-template-columns:5fr 7fr;gap:56px;align-items:center}
.rec.inv .wrap{grid-template-columns:7fr 5fr}
.rec.inv .txt{order:2}
.rec .wrap.so-texto{align-items:start}
}
.side .det,.side pre{margin-top:0}
@media (max-width:599px){header .wrap{flex-wrap:wrap;gap:0 12px}header nav{width:100%;justify-content:space-between;margin:0 -8px;width:calc(100% + 16px)}header .lang{margin-left:0}}
.rec .wrap>*{min-width:0}
.rotulo a{color:inherit}
.indice a{padding:6px 0}
/* faixa "E mais" de Recursos */
.mais-grade{display:grid;gap:0 40px;margin-top:8px}
.mais article{padding:16px 0 20px;border-top:1px solid var(--linha);scroll-margin-top:16px}
.mais h3{margin-bottom:6px}
.mais p{max-width:34rem}
@media (min-width:960px){.mais-grade{grid-template-columns:1fr 1fr}}