/* Raio-X da Rodada, drawn like the explainer slides of the original video: a whiteboard. Handwriting (Virgil, the
   Excalidraw font), ink outlines, the Excalidraw palette (open-color), a yellow highlighter under titles, red dashed limits
   and PASSOU/FALHOU stamps. One deliberate look, light only: a whiteboard has no dark mode.
   Colours keep one meaning everywhere: green = passed / the app, red = failed / limits / CPU steal, orange = p95,
   violet = p99 / PostgreSQL, blue = users, teal = requests.
   Layout: an app bar; on wide screens the experiments list on the left and the experiment or round on the right. */

/* Virgil (SIL OFL 1.1, excalidraw/virgil) and IBM Plex Mono (OFL), served by the app itself: the FasorX CSP has font-src 'self' */
@font-face { font-family: "Virgil"; src: url("fontes/Virgil.woff2?v=fffd42d50f") format("woff2"); font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fontes/IBMPlexMono-400.woff2?v=bb87500e32") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  color-scheme: light;
  --papel: #f3f6fa; --papel-2: #e8edf4; --superficie: #ffffff; --superficie-2: #f1f3f5;   /* faint bluish grey paper, painted over by fundo.js */
  --tinta: #1e1e1e; --tinta-2: #495057; --tinta-3: #6c757d;   /* tinta-3 reads on white at 4.7:1 (small captions) */
  --fio: #1e1e1e; --fio-leve: #dee2e6; --fio-forte: #1e1e1e;
  --marca: #ffec99;                                    /* the yellow highlighter */
  --sombra: 4px 4px 0 rgba(30, 30, 30, .16);
  --raio-painel: 12px; --raio-controle: 8px;
  --fonte-mao: "Virgil", "Segoe Print", "Comic Sans MS", cursive;
  --fonte-texto: var(--fonte-mao); --fonte-titulo: var(--fonte-mao);
  --fonte-mono: "IBM Plex Mono", "Cascadia Mono", "Cascadia Code", Consolas, "Roboto Mono", "DejaVu Sans Mono", "Liberation Mono", monospace;   /* never Courier: a serif mono reads as a glitch next to the handwriting */
  --app: #1971c2; --app-tinta: #1971c2; --app-fundo: #e7f5ff;
  --bom: #2b8a3e; --bom-fundo: #ebfbee; --bom-pastel: #b2f2bb;
  --ruim: #e03131; --ruim-fundo: #fff5f5; --ruim-pastel: #ffc9c9;
  --alerta: #c2410c; --alerta-fundo: #fff4e6;   /* text orange, 5:1 on white; the p95 series keeps #f08c00 below */
  --limite: #c92a2a;
  /* chart series */
  --s-usuarios: #1971c2; --s-rps: #0c8599; --s-med: #868e96; --s-p95: #f08c00; --s-p99: #7048e8;
  --s-user: #1971c2; --s-sys: #74c0fc; --s-io: #ced4da; --s-steal: #e03131;
  --s-app: #2f9e44; --s-pg: #7048e8; --s-nginx: #f08c00; --s-cache: #ced4da; --s-util: #868e96;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }   /* components set display: grid/flex, which would beat the attribute */
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background-color: var(--papel); color: var(--tinta); font: 15px/1.5 var(--fonte-mao); }
/* a page that i18n.js is about to translate (transicao.js marks it): hidden below the bar until then, so the Portuguese source
   neither flashes nor reflows the page; should i18n.js never run, the page shows anyway after 2 s */
.traduzindo body > :not(.barra) { visibility: hidden; animation: sem-traducao 0s 2s forwards; }
@keyframes sem-traducao { to { visibility: visible; } }
/* the gouache painting (fundo.js, the FITradeoff technique): a fixed canvas behind everything; white cards stand out on it */
.fundo-guache { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
h1, h2, h3 { margin: 0; font-weight: 400; text-wrap: balance; }
a { color: var(--app-tinta); }
code, pre { font-family: var(--fonte-mono); }
code { font-size: .85em; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px dashed var(--app); outline-offset: 3px; }
.rotulo { font: 14px/1.2 var(--fonte-mao); color: var(--tinta-3); }
/* the highlighter: a thick yellow stroke behind the lower half of the words */
.mt { display: inline; padding: 0 .12em; background: linear-gradient(transparent 58%, var(--marca) 58%, var(--marca) 92%, transparent 92%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* ---- app bar ---------------------------------------------------------------------------------------------------------- */
.barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; padding: 14px 22px;
  background: var(--superficie); border-bottom: 2px solid var(--fio); }
.marca { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; text-decoration: none; color: var(--tinta); }
.marca b { font: 26px/1.1 var(--fonte-mao); }
.marca span { font-size: 14px; color: var(--tinta-3); }
.abas { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.abas a { white-space: nowrap; }   /* a tab never breaks: the highlighter stays under its own words */
.abas a { padding: 4px 12px; border-radius: var(--raio-controle); color: var(--tinta-2); text-decoration: none; font-size: 17px; }
.abas a:hover { color: var(--tinta); background: var(--superficie-2); }
.abas a[aria-current="page"] { color: var(--tinta); background: linear-gradient(transparent 55%, var(--marca) 55%, var(--marca) 90%, transparent 90%); }
.abas small { color: var(--tinta-3); font-size: 13px; }

/* ---- page layout ------------------------------------------------------------------------------------------------------ */
.layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; max-width: 1480px; margin: 0 auto; padding: 22px 16px 56px; }
@media (min-width: 1100px) { .layout { padding-inline: 24px; } }
.painel { background: var(--superficie); border: 2px solid var(--fio); border-radius: var(--raio-painel); box-shadow: var(--sombra); }

/* ---- buttons ---------------------------------------------------------------------------------------------------------- */
.botoes { display: flex; flex-wrap: wrap; gap: 6px; }
.botao { padding: 4px 12px; border: 2px solid var(--fio); border-radius: var(--raio-controle); background: var(--superficie); cursor: pointer;
  font-size: 14px; box-shadow: 2px 2px 0 rgba(30, 30, 30, .12); }
.botao:hover:not(:disabled) { background: var(--marca); }
.botao:active:not(:disabled) { transform: translate(1px, 1px); box-shadow: 1px 1px 0 rgba(30, 30, 30, .12); }
.botao:disabled { color: var(--tinta-3); border-color: var(--fio-leve); cursor: default; box-shadow: none; }
body.arrastando .conteudo { outline: 2px dashed var(--app); outline-offset: 6px; }   /* round files dropped on the page */
.vazio-lista { padding: 8px 6px; margin: 0; color: var(--tinta-3); font-size: 14px; }

/* ---- shared building blocks ------------------------------------------------------------------------------------------- */
/* one column that never grows past the page: a wide child (a table inside a wrapper, a chart) scrolls inside its own box
   instead of pushing the whole view sideways on a phone */
.conteudo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; min-width: 0; align-content: start; }
.visao { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; min-width: 0; }
.cabeca { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px 24px; }
.cabeca > div { display: grid; gap: 4px; min-width: 0; flex: 1 1 420px; }
.cabeca h1 { font-size: clamp(34px, 5vw, 52px); line-height: 1.05; }
.cabeca h1 small { font-size: .5em; color: var(--tinta-2); }
.origem { font-size: 14px; color: var(--tinta-3); overflow-wrap: anywhere; }
.status { font: 12px var(--fonte-mono); color: var(--tinta-3); overflow-wrap: anywhere; }
.status.erro { color: var(--ruim); }
/* the stamp: a rubber stamp, slightly crooked, double outline */
.carimbo { flex: 0 0 auto; display: grid; justify-items: center; gap: 2px; padding: 8px 18px; transform: rotate(-6deg);
  border: 3px solid currentColor; border-radius: 10px; outline: 1.5px solid currentColor; outline-offset: 3px; background: var(--superficie); }
.carimbo b { font-size: 30px; line-height: 1; letter-spacing: .06em; font-weight: 400; }
.carimbo span { font-size: 13px; }
.carimbo.bom { color: var(--bom); } .carimbo.ruim { color: var(--ruim); } .carimbo.nada { color: var(--tinta-3); transform: none; }
.cabeca > .carimbo { flex: 0 0 auto; margin-right: 10px; }   /* beats .cabeca > div, which would stretch the stamp */
.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); padding: 6px 0; }
.numeros > div { padding: 6px 18px; display: grid; gap: 0; min-width: 0; }
.numeros > div + div { border-left: 2px dashed var(--fio-leve); }
.numeros b { font-size: 24px; font-weight: 400; line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.numeros b small { display: inline-block; }   /* a unit wraps whole under its value instead of spilling into the next cell */
.numeros b small { font-size: 14px; color: var(--tinta-3); margin-left: 4px; }
.secao { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.secao-cabeca { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 16px; }
.secao-cabeca h2 { font-size: 28px; }
.secao-cabeca p { margin: 0; color: var(--tinta-3); font-size: 15px; }
.secoes { display: grid; gap: 30px; }
.pilula { display: inline-block; padding: 0 9px; border-radius: 999px; border: 1.5px solid currentColor; font-size: 13px; line-height: 1.5; color: var(--tinta-2); }
.pilula.bom { color: var(--bom); background: var(--bom-fundo); }
.pilula.ruim { color: var(--ruim); background: var(--ruim-fundo); }
.pilula.alerta { color: var(--alerta); background: var(--alerta-fundo); }
.ok { color: var(--bom); } .x { color: var(--ruim); }

/* ---- experiment view -------------------------------------------------------------------------------------------------- */
.capacidades { display: grid; gap: 18px; }
.cap-card { padding: 20px 22px; display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .cap-card { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); column-gap: 36px; } }
.cap-esq, .cap-dir { display: grid; gap: 12px; align-content: start; min-width: 0; }
.cap-num { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.cap-num b { font-size: clamp(64px, 9vw, 104px); line-height: .95; font-weight: 400; color: var(--bom); letter-spacing: -.01em; }
.cap-num span { font-size: 20px; color: var(--tinta-2); }
.cap-sub { font-size: 16px; color: var(--tinta-2); }
/* horizontal bars, as on the slides: a label, a hand-outlined bar, the value */
.barras { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; align-items: center; gap: 8px 12px; }
.barras .nome { font-size: 15px; color: var(--tinta-2); white-space: nowrap; }
.barras .trilho-b { position: relative; height: 26px; }
.barras .barra-b { position: absolute; inset: 0 auto 0 0; border: 2px solid var(--fio); border-radius: 6px; background: var(--superficie-2); }
.barras .barra-b.esta { background: var(--bom-pastel); border-color: var(--bom); }
.barras .barra-b.video { background: #ffe8cc; border-color: #a0522d; }
.barras .valor-b { font-size: 20px; font-variant-numeric: tabular-nums; }
.diferenca { font-size: 26px; color: var(--alerta); }
.lat-titulo { font-size: 20px; }
.lat { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 10px 10px; }
.lat .nome { font-size: 20px; }
.lat .trilho-l { position: relative; height: 34px; }
.lat .barra-l { position: absolute; inset: 0 auto 0 0; border: 2px solid var(--fio); border-radius: 6px; background: var(--alerta-fundo); }
.lat .barra-l.p99 { background: #f3f0ff; border-color: var(--s-p99); }
.lat .barra-l.p95 { background: var(--alerta-fundo); border-color: var(--s-p95); }
.lat .barra-l.acima { background: var(--ruim-fundo); border-color: var(--ruim); }
.lat .val-l { position: absolute; top: 50%; transform: translate(10px, -50%); font-size: 20px; white-space: nowrap; }
.lat .lim { position: absolute; top: -6px; bottom: -22px; border-left: 2px dashed var(--limite); }
.lat .lim span { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); font-size: 12px; color: var(--limite); white-space: nowrap; }
.lat-nota { font-size: 16px; color: var(--alerta); margin-top: 14px; }
/* confirmation runs, like the RUN cards of the video */
.runs { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 24px 16px; padding-bottom: 18px; }   /* room for the stamps that hang off the cards */
.run { position: relative; padding: 12px 16px 16px; background: #fbfbf8; display: grid; gap: 2px; cursor: pointer; text-decoration: none; color: var(--tinta); }
.run:hover { background: var(--superficie); }
.run h3 { font-size: 16px; text-align: center; color: var(--tinta-2); padding-bottom: 6px; }
.run h3::before, .run h3::after { content: " ═══ "; color: var(--tinta-3); }
.run .lin { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; border-bottom: 1.5px dotted var(--fio-leve); font-size: 15px; }
.run .lin b { font-weight: 400; font-size: 18px; font-variant-numeric: tabular-nums; }
.run .lin small { color: var(--tinta-3); font-size: 12px; }
.run .carimbo { position: absolute; right: 10px; bottom: -16px; padding: 2px 12px; transform: rotate(-8deg); }
.run .carimbo b { font-size: 22px; }
/* the rounds table */
.tabela-wrap { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.tabela th, .tabela td { padding: 5px 8px; text-align: left; white-space: nowrap; }
.tabela thead th { font-size: 13px; font-weight: 400; color: var(--tinta-3); border-bottom: 2px solid var(--fio); position: sticky; top: 0; background: var(--superficie); }
.tabela .n { text-align: right; }
.tabela .num { color: var(--tinta-3); width: 1%; }
.tabela td.acima { color: var(--ruim); }
.grupo-linha th { padding: 14px 12px 4px; font-size: 18px; font-weight: 400; border-bottom: 1.5px solid var(--fio-leve); }
.grupo-linha .cap { margin-left: 12px; color: var(--bom); font-size: 15px; }
.linha { cursor: pointer; }
.linha td { border-bottom: 1.5px dotted var(--fio-leve); }
.linha:hover td, .linha:focus-visible td { background: #fff9db; }
.linha:focus-visible { outline-offset: -2px; }   /* the global dashed outline, drawn inside the row: .tabela-wrap clips what sticks out */
.linha a { color: var(--tinta); text-decoration: none; }
.res { display: inline-flex; gap: 4px; }

/* ---- round view ------------------------------------------------------------------------------------------------------- */
.trilha { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; }
.trilha a { color: var(--tinta-2); text-decoration: none; font-size: 17px; }
.trilha a:hover { color: var(--tinta); background: var(--marca); }
.passos { display: flex; gap: 8px; }
/* "when does a stack fail?": one card per criterion, red when it is missed */
.medidores { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.medidor { padding: 12px 16px 14px; display: grid; gap: 6px; align-content: start; text-align: center; }
.medidor.bom { border-color: var(--bom); background: var(--bom-fundo); }
.medidor.ruim { border-color: var(--ruim); background: var(--ruim-fundo); }
.medidor.alerta { border-color: var(--alerta); background: var(--alerta-fundo); }
.medidor .rotulo { font-size: 18px; color: var(--tinta); }
.medidor .valor { font-size: 40px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.medidor .valor small { font-size: 18px; margin-left: 4px; color: var(--tinta-2); }
.medidor.ruim .valor { color: var(--ruim); }
.medidor .marca-ok { font-size: 26px; margin-left: 6px; }
.trilho { position: relative; height: 12px; margin: 4px 6px 0; border: 2px solid var(--fio); border-radius: 7px; background: var(--superficie); }
.trilho i { position: absolute; inset: -2px auto -2px -2px; border-radius: 7px 0 0 7px; background: var(--s-p95); border: 2px solid var(--fio); }
.medidor.bom .trilho i { background: var(--bom-pastel); } .medidor.ruim .trilho i { background: var(--ruim-pastel); } .medidor.alerta .trilho i { background: #ffd8a8; }
.trilho b { position: absolute; top: -8px; bottom: -8px; border-left: 2px dashed var(--limite); }
.medidor .nota { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 8px; font-size: 13px; color: var(--tinta-2); margin: 2px 4px 0; }
.medidor .nota span { white-space: nowrap; }
.graficos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 16px; }
.grafico { padding: 14px 16px 10px; display: grid; gap: 2px; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.grafico.largo { grid-column: 1 / -1; }
.grafico h3 { font-size: 20px; }
.grafico .dica { margin: 0; font-size: 14px; color: var(--tinta-3); max-width: 90ch; }
.plot { position: relative; height: 230px; min-width: 0; margin-top: 6px; }
.grafico.largo .plot { height: 260px; }
.fixado { font-size: 14px; color: var(--tinta-2); }
.fixado b { font-weight: 400; color: var(--ruim); }
.faltando { margin: 0; padding: 10px 14px; border: 2px dashed var(--fio-leve); border-radius: var(--raio-controle); color: var(--tinta-3); font-size: 15px; }
.boas-vindas { padding: 26px 28px; display: grid; gap: 10px; max-width: 72ch; }
.boas-vindas h1 { font-size: 34px; }
.boas-vindas p { margin: 0; color: var(--tinta-2); }
.rodape { color: var(--tinta-3); font-size: 14px; border-top: 2px dashed var(--fio-leve); padding-top: 14px; }
/* until painel.js shows a view every one is [hidden], and the footer alone sat mid-screen, then got pushed below the fold by the
   content (CLS 0.077 on every load); appearing with the view, below it, nothing moves */
.conteudo:not(:has(> :is(.visao, .boas-vindas):not([hidden]))) > .rodape { display: none; }

/* the orange tag of the home page's hero ("benchmark aberto · fase atual: N0") */
.selo { justify-self: start; padding: 2px 12px; border: 2px solid var(--alerta); border-radius: 999px; color: var(--alerta); background: var(--alerta-fundo); font-size: 14px; transform: rotate(-2deg); }

/* ---- the stack in evidence: logo in a hand-drawn circle, language, framework ----------------------------------------- */
.stack-cab { display: flex; align-items: center; gap: 12px; min-width: 0; }
.stack-cab .logo { flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px; border: 2.5px solid var(--fio); border-radius: 50%;
  background: var(--superficie); box-shadow: 2px 2px 0 rgba(30, 30, 30, .12); font-size: 16px; color: var(--tinta-2); }
.stack-cab .logo img { width: 58%; height: 58%; }
.stack-cab .logo.vazio { border-style: dashed; }
.stack-cab > div { display: grid; min-width: 0; line-height: 1.15; }
.stack-cab b { font-size: 19px; font-weight: 400; }
.stack-cab span:not(.logo) { font-size: 14px; color: var(--tinta-2); }
.stack-cab.grande .logo { width: 86px; height: 86px; border-width: 3px; box-shadow: var(--sombra); }
.stack-cab.grande b { font-size: clamp(32px, 4.5vw, 46px); line-height: 1.05; }
.stack-cab.grande span:not(.logo) { font-size: 19px; }
.nivel-chip { justify-self: start; margin-top: 4px; padding: 0 10px; border: 1.5px solid var(--fio); border-radius: 999px; font-style: normal; font-size: 13px; background: var(--marca); }
.exp-cap { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }

/* ---- the experiment: each stack is a chapter, each kind of chart a numbered part ------------------------------------ */
.bloco-stack { gap: 14px; padding-top: 22px; border-top: 3px solid var(--fio); }
.sub-titulo { display: flex; align-items: center; gap: 10px; font-size: 23px; margin-top: 10px; }
.num-sub { display: grid; place-items: center; width: 32px; height: 32px; border: 2px solid var(--fio); border-radius: 50%; font-size: 17px; background: var(--marca); }
.ranking { padding: 16px 20px 18px; display: grid; gap: 12px; }
.ranking h3 { font-size: 18px; color: var(--tinta-2); }
.rank-linha { display: grid; grid-template-columns: minmax(180px, 260px) minmax(0, 1fr) max-content; align-items: center; gap: 14px; }
.rank-linha .trilho-b { position: relative; height: 30px; }
.rank-linha .barra-b { position: absolute; inset: 0 auto 0 0; border: 2px solid var(--fio); border-radius: 6px; background: var(--superficie-2); }
.rank-linha .valor-b { font-size: 24px; font-variant-numeric: tabular-nums; }
.rank-linha.video { opacity: .85; }
.ranking .botao { justify-self: start; margin-top: 4px; }
.run .stack-cab { margin-bottom: 6px; }
.run .stack-cab .logo { width: 34px; height: 34px; }
.run .stack-cab b { font-size: 16px; }
.run .stack-cab span:not(.logo) { font-size: 12px; }
a.run, .run[tabindex] { cursor: pointer; }

/* ---- the rounds table: a round opens in a row below its own; ticked rows go to the comparison ----------------------- */
.tabela .sel { width: 1%; text-align: center; }
.tabela input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--app); cursor: pointer; vertical-align: middle; }
.grupo-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.grupo-cab .stack-cab .logo { width: 34px; height: 34px; }
.grupo-cab .cap { margin-left: 0; }
.linha.selecionada td { background: var(--app-fundo); }
.linha.aberta td { background: #fff3bf; border-bottom-color: transparent; }
/* the round clicked in the table opens in one panel below it */
.detalhe-rodada { overflow: hidden; scroll-margin-top: 12px; min-height: 90vh; }   /* room to scroll to it before its charts load */
.detalhe-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 14px; background: #fff3bf; border-bottom: 2px dashed var(--fio-leve); }
.detalhe-barra .rotulo { margin-right: auto; color: var(--tinta); font-size: 16px; }
.detalhe-barra a { color: var(--tinta-2); }
.detalhe-host { display: grid; gap: 20px; padding: 18px 16px 22px; background: var(--papel); font-size: 15px; }
.cabeca.compacta h2 { font-size: 34px; line-height: 1.05; }
.secao-titulo { font-size: 24px; }

/* ---- comparing rounds: the tray at the bottom and the comparison section ---------------------------------------------- */
.layout { padding-bottom: 130px; }   /* the tray never covers the end of the page */
.bandeja { position: fixed; z-index: 50; left: 50%; bottom: 16px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px);
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 14px; background: var(--superficie);
  border: 2px solid var(--fio); border-radius: 12px; box-shadow: 4px 4px 0 rgba(30, 30, 30, .18); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 1px 4px 1px 10px; border: 2px solid var(--fio); border-radius: 999px; font-size: 13px; background: var(--superficie); }
.chip i { width: 10px; height: 10px; border-radius: 50%; }
.chip-x { border: 0; background: none; cursor: pointer; color: var(--tinta-3); padding: 0 4px; font-size: 13px; }
.chip-x:hover { color: var(--ruim); }
.botao.forte { background: var(--marca); }
.comparacao { padding-top: 22px; border-top: 3px solid var(--fio); scroll-margin-top: 12px; }
.comparacao .secao-cabeca .botao { margin-left: auto; }

@media (max-width: 640px) {   /* phones: the six columns that decide a round; the rest is one tap away, in the round itself */
  .barras { grid-template-columns: minmax(0, 1fr) max-content; row-gap: 2px; }
  .barras .nome { grid-column: 1 / -1; margin-top: 6px; }
  .tabela thead th:nth-child(n+9), .tabela .linha td:nth-child(n+9), .tabela thead th:nth-child(3), .tabela .linha td:nth-child(3),
  .tabela thead th:nth-child(5), .tabela .linha td:nth-child(5) { display: none; }
  .rank-linha { grid-template-columns: minmax(0, 1fr) max-content; }
  .rank-linha .stack-cab { grid-column: 1 / -1; }
  .stack-cab.grande .logo { width: 64px; height: 64px; }
  .tabela th, .tabela td { padding-inline: 7px; }
  .cabeca .carimbo { transform: rotate(-4deg); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* confirmation attempts: 3 x 5 min each, with the stamp and the median of the runs */
.trio { display: grid; gap: 12px; padding: 14px 16px 18px; border: 2px dashed var(--fio-leve); border-radius: var(--raio-painel); background: rgba(255, 255, 255, .55); }
.trio-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.trio-cab b { font-size: 24px; font-weight: 400; }
.trio-cab span { color: var(--tinta-2); }
.trio-cab .carimbo { margin-left: auto; padding: 2px 14px; }
.trio-cab .carimbo b { font-size: 22px; }
.medianas .medidor .valor { font-size: 32px; }

/* ---- linguagens.html (and index.html's hero): the languages benchmark ----------------------------------------------------------------------------------------- */
.inicio { max-width: 1220px; margin: 0 auto; padding: 34px 16px 72px; display: grid; gap: 46px; }
@media (min-width: 900px) { .inicio { padding-inline: 28px; } }
.hero { display: grid; gap: 18px; justify-items: start; }
.hero h1 { font-size: clamp(42px, 7vw, 82px); line-height: 1.02; max-width: 15ch; }
.hero .lead { margin: 0; max-width: 70ch; font-size: 18px; color: var(--tinta-2); }
.hero-numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; width: 100%; }
.hero-numeros > div { display: grid; gap: 2px; padding: 14px 18px; }
.hero-numeros b { font-size: 40px; font-weight: 400; line-height: 1.05; }
.hero-numeros span { color: var(--tinta-2); font-size: 15px; }
.hero .botoes .botao { font-size: 16px; padding: 6px 16px; text-decoration: none; color: var(--tinta); }
.stacks-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.stack-card { padding: 14px 16px; display: grid; gap: 8px; align-content: start; }
.stack-card p { margin: 0; color: var(--tinta-2); font-size: 14px; }
.stack-card .stack-status { margin-top: auto; padding-top: 6px; border-top: 1.5px dotted var(--fio-leve); color: var(--tinta-3); }
.stack-card.medida { border-color: var(--bom); }
.stack-card.medida .stack-status { color: var(--bom); }
.stack-card .stack-status b { font-size: 24px; font-weight: 400; }
.stack-card.video { border-style: dashed; background: #fff8ef; }
.stack-card.video .stack-status { color: #a0522d; }
/* the stack's concurrency at N0 (its framework's default); orange where that default caps the requests in flight */
.stack-n0 { display: block; margin: 0; color: var(--tinta-2); font-size: 13.5px; line-height: 1.35; }
.stack-n0 small { display: block; color: var(--tinta-3); font-size: 12px; }
.stack-card .stack-n0 { color: var(--tinta-2); font-size: 13.5px; }
.stack-n0.trava, .stack-card .stack-n0.trava, .stack-n0.trava small { color: var(--alerta); }
.stack-cab .stack-n0 { margin-top: 3px; font-size: 12.5px; }
.cap-esq .stack-n0 { font-size: 15px; }
.regua { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); gap: 16px; }
.regua-card { padding: 16px 20px 18px; display: grid; gap: 10px; align-content: start; }
.regua-card h3 { display: flex; align-items: center; gap: 10px; font-size: 24px; }
.regua-card p { margin: 0; color: var(--tinta-2); }
.regua-card p b { color: var(--tinta); font-weight: 400; background: linear-gradient(transparent 60%, var(--marca) 60%); }
.nota-mao { font-size: 14px; color: var(--alerta) !important; }
/* the setup: k6 on the loadgen sends the users' requests to the target over the private network; dots travel the wires */
.arranjo { margin: 0 0 16px; padding: 16px 20px 18px; }
.arranjo figcaption { margin-bottom: 14px; font-size: 22px; }
.arranjo-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 1.1fr) minmax(0, 1fr); align-items: center; gap: 14px; }
.maquina { display: grid; gap: 8px; align-content: start; padding: 12px 14px 14px; border: 2.5px solid var(--fio); border-radius: 14px;
  background: var(--superficie-2); box-shadow: var(--sombra); }
.maquina.alvo { background: #fff9db; }   /* the one under test */
.maquina-cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; }
.maquina-cab b { font-size: 26px; font-weight: 400; line-height: 1.1; }
.maquina-cab code { font: 12px var(--fonte-mono); color: var(--tinta-3); }
.maquina-sub { margin: 0; color: var(--tinta-2); font-size: 14px; }
.maquina-nota { margin: 0; color: var(--tinta-3); font-size: 13px; }
.k6 { display: flex; align-items: baseline; gap: 10px; }
.k6 b { color: #7d64ff; font-size: 34px; font-weight: 400; line-height: 1; }   /* k6's purple */
.k6 span { color: var(--tinta-2); }
.vus { display: flex; flex-wrap: wrap; gap: 6px 6px; }
.vus i { position: relative; width: 14px; height: 19px; }
.vus i::before, .vus i::after { content: ""; position: absolute; border: 1.5px solid var(--fio); background: var(--superficie); box-sizing: border-box; }
.vus i::before { left: 3.5px; top: 0; width: 7px; height: 7px; border-radius: 50%; }
.vus i::after { left: 0; bottom: 0; width: 14px; height: 10px; border-bottom: 0; border-radius: 7px 7px 0 0; animation: vu 3s infinite; }
.vus i:nth-child(5n+1)::after { animation-delay: -.6s; } .vus i:nth-child(5n+2)::after { animation-delay: -1.8s; }
.vus i:nth-child(5n+3)::after { animation-delay: -1.2s; } .vus i:nth-child(5n+4)::after { animation-delay: -2.4s; }
@keyframes vu { 0%, 70%, 100% { background: var(--superficie); } 80% { background: #d0bfff; } }   /* a user sending a request */
.fio { display: grid; gap: 16px; align-content: center; text-align: center; }
.fio-ida, .fio-volta { display: grid; gap: 4px; }
.fio-rotulo { color: var(--tinta-2); font-size: 14px; line-height: 1.3; }
.fio code { font: 11.5px var(--fonte-mono); color: var(--tinta-3); }
.fio-rede { padding-top: 6px; border-top: 1.5px dashed var(--fio-leve); color: var(--tinta-3); font-size: 12.5px; }
.fio-trilha { position: relative; height: 12px; container-type: size; }   /* the dots move on transform in cqw/cqh (the track's size): compositor only, no layout per frame on an idle page */
.fio-trilha::before { content: ""; position: absolute; left: 0; right: 8px; top: 5px; border-top: 2.5px solid var(--fio); }
.fio-trilha::after { content: ""; position: absolute; right: 0; top: 0; border: 6.5px solid transparent; border-left: 11px solid var(--fio); border-right: 0; }
.fio-volta .fio-trilha::before { left: 8px; right: 0; border-top-style: dashed; }
.fio-volta .fio-trilha::after { left: 0; right: auto; border-left: 0; border-right: 11px solid var(--fio); }
.fio-trilha i { position: absolute; top: 1px; left: 0; width: 10px; height: 10px; border: 2px solid var(--fio); border-radius: 50%; background: var(--marca);
  box-sizing: border-box; animation: ida 2.4s linear infinite; }
.fio-volta .fio-trilha i { background: #b2f2bb; animation-name: volta; }   /* a response */
.fio-trilha i:nth-child(2) { animation-delay: -.8s; } .fio-trilha i:nth-child(3) { animation-delay: -1.6s; }
@keyframes ida { 0% { transform: translateX(0); opacity: 0; } 12%, 88% { opacity: 1; } 100% { transform: translateX(calc(100cqw - 22px)); opacity: 0; } }
@keyframes volta { 0% { transform: translateX(calc(100cqw - 10px)); opacity: 0; } 12%, 88% { opacity: 1; } 100% { transform: translateX(12px); opacity: 0; } }
.camadas { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.camadas li { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 8px;
  padding: 5px 10px; border: 2px solid var(--fio); border-radius: 9px; background: var(--superficie); }
.camadas li + li::before { content: "↓"; position: absolute; left: 50%; top: -17px; transform: translateX(-50%); color: var(--tinta-2); font-size: 14px; line-height: 1; }
.camadas b { font-size: 16px; font-weight: 400; }
.camadas span { color: var(--tinta-3); font-size: 12.5px; }
.camadas .app { border-width: 2.5px; background: var(--marca); }
.camadas .app span { color: var(--tinta-2); }
.logos-mini { display: flex; flex-wrap: wrap; gap: 4px; width: 100%; padding-top: 2px; }
.logos-mini img { width: 16px; height: 16px; }
@media (max-width: 760px) {   /* phones: loadgen above, the wires run down (requests) and up (responses), target below */
  .arranjo-grade { grid-template-columns: minmax(0, 1fr); }
  .fio { grid-template-columns: 1fr 1fr; gap: 8px 12px; }
  .fio-ida, .fio-volta { justify-items: center; }
  .fio-volta .fio-trilha { order: 2; }
  .fio-rede { grid-column: 1 / -1; }
  .fio-trilha { width: 12px; height: 64px; }
  .fio-trilha::before { left: 5px; right: auto; top: 0; bottom: 8px; border-top: 0; border-left: 2.5px solid var(--fio); }
  .fio-trilha::after { left: -0.5px; right: auto; top: auto; bottom: 0; border: 6.5px solid transparent; border-top: 11px solid var(--fio); border-bottom: 0; }
  .fio-volta .fio-trilha::before { top: 8px; bottom: 0; border-left-style: dashed; }
  .fio-volta .fio-trilha::after { left: -0.5px; top: 0; bottom: auto; border: 6.5px solid transparent; border-top: 0; border-bottom: 11px solid var(--fio); }
  .fio-trilha i { left: 1px; animation-name: desce; }
  .fio-volta .fio-trilha i { animation-name: sobe; }
}
@keyframes desce { 0% { transform: translateY(0); opacity: 0; } 12%, 88% { opacity: 1; } 100% { transform: translateY(calc(100cqh - 22px)); opacity: 0; } }
@keyframes sobe { 0% { transform: translateY(calc(100cqh - 10px)); opacity: 0; } 12%, 88% { opacity: 1; } 100% { transform: translateY(12px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {   /* still dots, spread along the wires */
  .fio-trilha i, .vus i::after { animation: none; }
  .fio-trilha i:nth-child(2) { left: 40%; } .fio-trilha i:nth-child(3) { left: 75%; }
}

/* the user's loop: one row per step on an ink line; a bracket on the left takes the last step back to the first */
.ciclo { --linha: 36px; list-style: none; margin: 2px 0 0; padding: 0 0 0 22px; position: relative; display: grid; gap: 2px;
  background: linear-gradient(var(--fio), var(--fio)) no-repeat calc(var(--linha) - 1px) 14px / 2px calc(100% - 28px); }
.ciclo::after { content: ""; position: absolute; left: 4px; top: 13px; bottom: 13px; width: 30px; border: 2px solid var(--fio); border-right: 0;
  border-radius: 14px 0 0 14px; }
.ciclo::before { content: ""; position: absolute; left: 18px; top: 7px; border: 7px solid transparent; border-left: 10px solid var(--fio); border-right: 0; }
.ciclo li { position: relative; z-index: 1; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: start; column-gap: 10px; min-height: 28px; padding-top: 2px; }
.ciclo li::before { content: ""; justify-self: center; margin-top: 4px;   /* on the first line of a wrapped label */
  width: 16px; height: 16px; border: 2px solid var(--fio); border-radius: 50%;
  background: var(--marca); box-sizing: border-box; }
.ciclo .passo { color: var(--tinta); font-size: 16px; }
.ciclo .passo b { font-weight: 400; background: linear-gradient(transparent 60%, var(--marca) 60%); }
.ciclo code, .ciclo .tempo { align-self: center; }
.ciclo code { font: 12px var(--fonte-mono); color: var(--tinta-3); white-space: nowrap; }
.ciclo .talvez::before { background: var(--superficie); }   /* only on some laps: hollow */
.ciclo .talvez .passo { font-size: 15px; }
.ciclo .espera { min-height: 24px; grid-template-columns: 28px auto minmax(0, 1fr); }   /* the wait bar right after its label */
.ciclo .espera .tempo { justify-self: start; }
.ciclo .espera::before { margin-top: 5px; width: 10px; height: 10px; border-color: var(--tinta-3); background: var(--superficie); }
.ciclo .espera .passo { color: var(--tinta-3); font-size: 14px; }
.ciclo .tempo { display: flex; align-items: center; gap: 8px; color: var(--tinta-2); font-size: 14px; white-space: nowrap; }
.ciclo .tempo i { width: calc(var(--s) * 9px); height: 8px; border: 1.5px solid var(--tinta-3); border-radius: 4px;   /* the mean wait */
  background: repeating-linear-gradient(-45deg, transparent 0 3px, rgba(30, 30, 30, .18) 3px 4px); }
.ciclo .volta::before { visibility: hidden; }
.ciclo .volta .passo { color: var(--tinta-2); font-size: 15px; }
@media (max-width: 460px) { .ciclo li:not(.espera) { grid-template-columns: 28px minmax(0, 1fr); } .ciclo code { grid-column: 2; } }
.ciclo li.ativo .passo { color: var(--tinta); }
.ciclo li.ativo::before { box-shadow: 0 0 0 4px var(--marca); }
.ciclo li.pulado { opacity: .5; }   /* the optional step the dice left out of this lap */
/* the same lap as a ring (inicio.js builds it from the list above): the ball walks it, the steps light up as it passes and
   the centre says what is happening now. The list below keeps the routes, the model's waits and the probabilities. */
.ciclo-anel { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); align-items: center; gap: 16px; }
.anel-painel { display: grid; justify-items: center; gap: 8px; min-width: 0; }
.ciclo-anel .ciclo { justify-self: stretch; min-width: 0; }
.anel-nota { color: var(--tinta-3); font-size: 12px; text-align: center; }
.anel { position: relative; width: min(100%, 230px); aspect-ratio: 1; }
.anel svg { display: block; width: 100%; height: 100%; overflow: visible; }
.an-trilho { fill: none; stroke: var(--fio-leve); stroke-width: 6; }
.an-prog { fill: none; stroke: var(--marca); stroke-width: 6; stroke-linecap: round; }
.an-marca { fill: var(--superficie); stroke: var(--fio-leve); stroke-width: 2; }
.an-marca.aceso { stroke: var(--fio); }
.an-marca.aceso:not(.talvez) { fill: var(--fio); }
.an-marca.talvez { stroke-dasharray: 3 3; }   /* only on some laps: hollow and dashed, lit or not */
.an-bola { fill: var(--app-fundo); stroke: var(--fio); stroke-width: 2.5; }
@media (prefers-reduced-motion: no-preference) { .an-marca { transition: fill .3s, stroke .3s; } }
.an-centro { position: absolute; inset: 23%; display: grid; align-content: center; justify-items: center; gap: 3px;
  text-align: center; text-wrap: balance; pointer-events: none; }
.an-acao { font-size: 13px; line-height: 1.3; }
.an-acao b { font-weight: 400; background: linear-gradient(transparent 60%, var(--marca) 60%); }
.an-centro.esperando .an-acao { color: var(--tinta-3); }
.an-det { font: 10px var(--fonte-mono); color: var(--tinta-3); overflow-wrap: anywhere; }   /* a route is long and the circle is small */
.an-centro.esperando .an-det { font: 13px var(--fonte-mao); }   /* a wait shows the model's seconds, not a route */
.an-pula { font-size: 12px; color: var(--alerta); }
.anel-pausa { padding: 1px 10px; border: 2px solid var(--fio-leve); border-radius: var(--raio-controle); background: var(--superficie);
  color: var(--tinta-2); font: 14px var(--fonte-mao); cursor: pointer; }
.anel-pausa:hover { border-color: var(--fio); color: var(--tinta); }
.criterios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.criterios > div { padding: 10px 12px; display: grid; gap: 2px; text-align: center; border-color: var(--ruim); background: var(--ruim-fundo); }
.criterios span { font-size: 16px; }
.criterios b { font-size: 26px; font-weight: 400; color: var(--ruim); }
.criterios small { font-size: 12px; color: var(--tinta-2); }
/* where it runs: the DigitalOcean regions used and what the droplets cost */
.onde { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 16px; }
.onde-card { padding: 16px 20px 18px; display: grid; gap: 12px; align-content: start; }
.onde-card h3 { margin: 0; font-size: 24px; font-weight: 400; }
.onde-card p { margin: 0; color: var(--tinta-2); }
.onde-card p b { color: var(--tinta); font-weight: 400; background: linear-gradient(transparent 60%, var(--marca) 60%); }
.regioes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.regioes li { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: baseline; gap: 10px; }
.regiao-cod { justify-self: start; padding: 0 8px; border: 2px solid var(--fio); border-radius: var(--raio-controle); background: var(--superficie-2);
  font: 16px/1.5 var(--fonte-mono); }
.regioes small { color: var(--tinta-3); font-size: 13px; }
.precos { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.precos th, .precos td { padding: 6px 8px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--fio-leve); }
.precos tr:first-child th { font-size: 13px; font-weight: 400; color: var(--tinta-3); border-bottom: 2px solid var(--fio); }
.precos th[scope="row"] { font-weight: 400; }
.precos td.n, .precos tr:first-child th:nth-child(n+2) { text-align: right; white-space: nowrap; }
.precos th b { font-weight: 400; font-size: 17px; }
.precos code { font: 13px var(--fonte-mono); white-space: nowrap; }
.precos small { display: block; color: var(--tinta-3); font-size: 13px; }
.gasto { margin: 0; font-size: 17px; }
.gasto b { font-size: 26px; font-weight: 400; background: linear-gradient(transparent 60%, var(--marca) 60%); }
/* the language switch, at the end of the top bar; .alternar (the ranking's unit) is the same control */
.abas { margin-left: auto; }
.idiomas, .alternar { display: flex; gap: 4px; }
.idiomas button, .alternar button { padding: 1px 8px; border: 2px solid var(--fio-leve); border-radius: var(--raio-controle); background: var(--superficie);
  color: var(--tinta-2); font: 15px var(--fonte-mao); cursor: pointer; }
.idiomas button:hover, .alternar button:hover { border-color: var(--fio); color: var(--tinta); }
.idiomas button[aria-pressed="true"], .alternar button[aria-pressed="true"] { border-color: var(--fio); background: var(--marca); color: var(--tinta); }
.alternar { justify-self: start; }
.alternar button { padding: 2px 14px; font-size: 17px; }

/* the timeline: one ball per language on a zig-zag line (an SVG that inicio.js draws through the balls' centres), its card
   beside it on alternating sides; each card spans two rows, so the two columns interleave and the line zigs and zags */
.zz { list-style: none; margin: 0; padding: 0; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 170px minmax(0, 1fr); }
.zz-linha { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.zz-linha path { fill: none; stroke: var(--fio); stroke-width: 3; stroke-linecap: round; }
.zz-item { display: contents; }
.zz-bola { position: relative; z-index: 1; grid-column: 2; grid-row: var(--i); align-self: start; justify-self: start; width: 66px; height: 66px; margin-top: 20px; }
.zz-item.dir .zz-bola { justify-self: end; }
.zz-bola .logo { display: grid; place-items: center; width: 100%; height: 100%; border: 3px solid var(--fio); border-radius: 50%; box-shadow: var(--sombra); box-sizing: border-box; }
.zz-bola .logo img { width: 56%; height: 56%; }
.zz-num { position: absolute; top: -8px; right: -8px; display: grid; place-items: center; width: 26px; height: 26px; border: 2px solid var(--fio);
  border-radius: 50%; background: var(--marca); font-size: 14px; font-weight: 400; }
.zz-item.planejado .zz-bola .logo { border-style: dashed; box-shadow: none; }
.zz-item.planejado .zz-bola .logo img { opacity: .5; }   /* the ball stays opaque: the line never shows through */
.zz-item.planejado .zz-num { background: var(--superficie); }
.zz-card { grid-row: var(--i) / span 2; align-self: start; display: grid; gap: 8px; margin: 8px 0; padding: 14px 16px 14px; color: var(--tinta); text-decoration: none; }
.zz-item.esq .zz-card { grid-column: 1; }
.zz-item.dir .zz-card { grid-column: 3; }
a.zz-card:hover { background: #fffdf3; }
.zz-item.planejado .zz-card { border-style: dashed; background: rgba(255, 255, 255, .7); box-shadow: none; }
.zz-cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; }
.zz-cab b { display: block; font-size: 24px; font-weight: 400; line-height: 1.1; }
.zz-cab span { color: var(--tinta-2); font-size: 14px; }
.zz-estado { padding: 0 8px; border: 1.5px solid; border-radius: 999px; font-size: 12.5px; font-style: normal; white-space: nowrap; }
.concluido .zz-estado { color: var(--bom); }
.andamento .zz-estado { color: var(--alerta); }
.planejado .zz-estado { color: var(--tinta-3); }
.zz-quando { color: var(--tinta-3); font-size: 12.5px; }
.zz-cap b { color: var(--bom); font-size: 34px; font-weight: 400; line-height: 1; }
.zz-cap small { margin-left: 8px; color: var(--tinta-3); font-size: 13px; }
.zz-faixa { display: grid; gap: 8px; }
.zz-trilho { position: relative; height: 12px; margin: 0 6px; border-bottom: 2px solid var(--fio-leve); }   /* 0 to the largest capacity measured */
.zz-trilho i { position: absolute; bottom: -7px; width: 12px; height: 12px; margin-left: -6px; border: 2px solid var(--fio); border-radius: 50%; box-sizing: border-box; }
.zz-trilho u { position: absolute; bottom: -9px; height: 16px; margin-left: -1.5px; border-left: 3px solid var(--fio); }   /* the median */
.zz-reps { display: flex; flex-wrap: wrap; gap: 4px; }
.zz-rep { padding: 0 8px; border: 1.5px dashed var(--fio-leve); border-radius: 999px; color: var(--tinta-3); font-size: 12.5px; }
.zz-rep.feita { border-style: solid; border-color: var(--bom); color: var(--tinta); }
.zz-rep.medindo { border-color: var(--alerta); color: var(--alerta); }
.tl-abrir { justify-self: end; color: var(--app-tinta); }
@media (max-width: 760px) {   /* phones: balls on the left in a narrow zig-zag, every card on the right */
  .zz { grid-template-columns: 74px minmax(0, 1fr); }
  .zz-bola { grid-column: 1; width: 50px; height: 50px; margin-top: 16px; }
  .zz-item.esq .zz-card, .zz-item.dir .zz-card { grid-column: 2; grid-row: var(--i); }
  .criterios { grid-template-columns: minmax(0, 1fr); }
}
.trava-txt { color: var(--alerta); }
@media (prefers-reduced-motion: reduce) and (max-width: 760px) {
  .fio-trilha i:nth-child(2) { left: 1px; top: 40%; } .fio-trilha i:nth-child(3) { left: 1px; top: 75%; }
}
.stack-card.bonus { border-style: dashed; }
.selo-bonus { justify-self: start; padding: 0 8px; border: 1.5px solid var(--ruim); border-radius: 999px; color: var(--ruim); font-size: 12.5px; }
.voltar-inicio { justify-self: start; color: var(--tinta-2); font-size: 15px; text-decoration: none; }
.voltar-inicio:hover { color: var(--tinta); text-decoration: underline; }
/* a language's page (#<stack>): its reproductions side by side, then one block per reproduction */
.rep-card { display: grid; gap: 6px; align-content: start; cursor: pointer; }
.rep-card h3 { margin: 0; font-size: 20px; }
.rep-cap b { color: var(--bom); font-size: 40px; font-weight: 400; line-height: 1; }
.rep-cap small { margin-left: 8px; color: var(--tinta-3); }
.rep-info { margin: 0; color: var(--tinta-2); font-size: 13.5px; }
.rep-link { justify-self: start; color: var(--app-tinta); font-size: 13.5px; }
.run.ensaio { border-style: dashed; background: rgba(255, 255, 255, .75); box-shadow: none; }
.run.ensaio .rep-cap b { color: var(--tinta-2); }
.rep-titulo { display: grid; gap: 2px; justify-items: start; }
.rep-titulo .mt { font-size: clamp(28px, 3.5vw, 38px); }

/* ---- motion: smooth same-page moves; between screens the blocks leave and come in through the sides (transicao.js, with the
   Web Animations API); the View Transition API keeps the top bar and the gouache background still in between. Everything
   stops for prefers-reduced-motion. */
.barra { view-transition-name: barra; }
.fundo-guache { view-transition-name: fundo; transition: opacity .6s ease; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  @view-transition { navigation: auto; }
  /* the content already left through the sides (transicao.js): the pages only cross-fade, quickly */
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .2s; }
}
@keyframes monta { from { opacity: 0; transform: translateX(var(--de, 18px)); } }
@keyframes surge { from { opacity: 0; transform: translateY(10px); } }
@keyframes abre { from { opacity: 0; transform: translateY(-10px); } }
@keyframes fecha { to { opacity: 0; transform: translateY(-10px); } }
@keyframes sobe { from { transform: translateY(110%); } }
@keyframes estala { from { opacity: 0; transform: scale(.6); } }
@keyframes desenha { from { clip-path: inset(0 0 100% 0); } }
@keyframes brilho { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* buttons, tabs and cards respond instead of snapping */
.botao, .abas a, .idiomas button, .chip, .zz-rep, .voltar-inicio, .tl-abrir, .rep-link, .experimento {
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .12s ease; }
a.zz-card, a.stack-card, .rep-card, .run, .zz-bola .logo { transition: transform .22s cubic-bezier(.2, .8, .2, 1), box-shadow .22s ease, background-color .22s ease; }
a.zz-card:hover, a.stack-card:hover, .rep-card:hover { transform: translateY(-3px); box-shadow: 6px 7px 0 rgba(30, 30, 30, .16); }
a.stack-card { color: var(--tinta); text-decoration: none; }
.zz-item:hover .zz-bola .logo { transform: scale(1.08); }

/* while the data loads: the containers keep their size and shimmer, so nothing jumps when it arrives */
.esqueleto { position: relative; border-radius: var(--raio-painel); border: 2px dashed var(--fio-leve);
  background: linear-gradient(100deg, rgba(255, 255, 255, .45) 30%, rgba(255, 255, 255, .95) 45%, rgba(255, 255, 255, .45) 60%) 0 0 / 300% 100%;
  animation: brilho 1.3s ease-in-out infinite; }
.zz.carregando { min-height: 760px; }
.zz.carregando::before { content: ""; position: absolute; inset: 0 8%; border-radius: var(--raio-painel); border: 2px dashed var(--fio-leve);
  background: linear-gradient(100deg, rgba(255, 255, 255, .45) 30%, rgba(255, 255, 255, .95) 45%, rgba(255, 255, 255, .45) 60%) 0 0 / 300% 100%;
  animation: brilho 1.3s ease-in-out infinite; }
.stack-status.esperando { height: 1.4em; width: 60%; border-radius: 6px; background: var(--superficie-2); animation: brilho 1.3s ease-in-out infinite;
  background-image: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .9) 45%, transparent 60%); background-size: 300% 100%; }
.carregando-pagina { display: grid; gap: 18px; }
.carregando-pagina > i { height: 96px; }
.carregando-pagina > i:first-child { height: 64px; width: 55%; }
.carregando-pagina > i:nth-child(3) { height: 260px; }

/* the content comes in as it is assembled: from its side, one after the other */
.zz-item .zz-card { animation: monta .5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 55ms); }
.zz-item.esq .zz-card { --de: -26px; }
.zz-item.dir .zz-card { --de: 26px; }
@media (max-width: 760px) { .zz-item.dir .zz-card { --de: -26px; } }   /* every card sits right of the balls: entering from the right it stuck out 10 px and a phone browser zoomed out for good */
.zz-item .zz-bola { animation: estala .4s cubic-bezier(.3, 1.4, .5, 1) both; animation-delay: calc(var(--i) * 55ms + 80ms); }
.zz-linha.desenhando { animation: desenha 1.1s cubic-bezier(.4, 0, .2, 1) both; }
.stack-card.chegou .stack-status, .regioes li, .gasto { animation: surge .4s ease both; }
.detalhe-rodada { animation: abre .32s cubic-bezier(.2, .8, .2, 1) both; }
.detalhe-rodada.fechando { animation: fecha .18s ease both; }
.comparacao:not([hidden]) { animation: surge .4s cubic-bezier(.2, .8, .2, 1) both; }
.bandeja:not([hidden]) { animation: sobe .35s cubic-bezier(.2, .8, .2, 1) both; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }   /* one run: the skeletons stop repainting */
}

/* the rankings at the end of the home page: by the mean and by the best reproduction, side by side */
.rankings { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); gap: 16px; }
.ranking-espera { min-height: 470px; }
.ranking-card { display: grid; gap: 8px; align-content: start; padding: 16px 20px 18px; }
.ranking-card h3 { margin: 0; font-size: 26px; font-weight: 400; }
.rk-sub, .rk-legenda { margin: 0; color: var(--tinta-3); font-size: 14px; }
.rk { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.rk li { display: grid; grid-template-columns: minmax(150px, 200px) minmax(0, 1fr) 62px 30px; align-items: center; gap: 10px; }
.rk-nome { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--tinta); text-decoration: none; }
.rk-nome:hover span { text-decoration: underline; }
.rk-nome span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-pos { flex: 0 0 26px; color: var(--tinta-3); font-weight: 400; text-align: right; }
.rk li:nth-child(-n+3) .rk-pos { color: var(--tinta); background: linear-gradient(transparent 60%, var(--marca) 60%); }
.rk-nome .logo { display: grid; flex: 0 0 auto; place-items: center; border: 2px solid var(--fio); border-radius: 50%; }
.rk-nome .logo img { width: 60%; height: 60%; }
.rk-trilho { position: relative; height: 22px; }
.rk-trilho::after { content: ""; position: absolute; top: -5px; bottom: -5px; left: var(--video); border-left: 2px dashed #a0522d; }
.rk-trilho i { position: absolute; inset: 0 auto 0 0; border: 2px solid var(--fio); border-radius: 6px; transform-origin: left;
  animation: cresce .8s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes cresce { from { transform: scaleX(0); } }
.rk-val { font-size: 20px; font-variant-numeric: tabular-nums; text-align: right; }
.rk-n { color: var(--tinta-3); font-size: 12px; }
@media (max-width: 560px) {
  .rk li { grid-template-columns: minmax(0, 1fr) 62px 30px; row-gap: 4px; }
  .rk-trilho { grid-column: 1 / -1; grid-row: 2; }
}

/* between the two rankings and the rest of the home page: the comparison of languages, which is a view of its own */

/* experiment 2 (import/export): its ranking is the second section of the home page, with the same cards as experiment 1 but
   another unit, and each language's own numbers live in its page (etl.js) */
.x-faltam { margin: 0; color: var(--tinta-3); font-size: 15px; }
.rk.sem-video .rk-trilho::after { display: none; }   /* the video has no import/export: no reference line */
.etl-lead { margin: 0; max-width: 72ch; color: var(--tinta-2); font-size: 16px; }
#etl .hero-numeros b { font-size: 32px; }
#etl .hero-numeros > div { padding: 10px 14px; }

/* a language's page: its subjects as buttons, each with the number that matters in it (painel.js navLingua) */
.nav-assunto { display: flex; flex-wrap: wrap; gap: 8px; }
.nav-assunto .botao { display: grid; gap: 0; padding: 6px 14px; text-align: left; }
.nav-assunto b { font-size: 17px; font-weight: 400; }
.nav-assunto small { color: var(--tinta-3); font-size: 13px; }
/* ---- the experiments page, overview (#geral): the two measurements, the flow, the languages --------------------------- */
/* one card per experiment: what it measures, in which unit, by which criterion, over how many samples. Side by side so the
   two yardsticks are read as two, and never as one number over the other. */
.medicoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 16px; }
.medicao { padding: 16px 20px 18px; display: grid; gap: 10px; align-content: start; }
.medicao h2 { font-size: 30px; }
.medicao > p { margin: 0; color: var(--tinta-2); font-size: 15.5px; }
.fatos { display: grid; gap: 8px; margin: 2px 0 0; }
.fatos > div { display: grid; grid-template-columns: minmax(0, 7em) minmax(0, 1fr); gap: 2px 12px; align-items: baseline; }
.fatos dt { color: var(--tinta-3); font-size: 14px; }
.fatos dd { margin: 0; color: var(--tinta-2); font-size: 15px; }
.medicao-estado { margin: auto 0 0; padding-top: 8px; border-top: 1.5px dotted var(--fio-leve); color: var(--tinta-2); font-size: 15px; }
.medicao-estado b { font-weight: 400; font-size: 20px; }
.medicao-estado[aria-busy="true"]::after { content: "…"; color: var(--tinta-3); }
/* the way in, in four steps: two of them do something, two say where you are and what comes after */
.fluxo { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fluxo-passo { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; align-items: start;
  padding: 10px 14px; border: 2px dashed var(--fio-leve); border-radius: var(--raio-painel); background: rgba(255, 255, 255, .6); }
.fluxo-passo.aqui { border-style: solid; border-color: var(--fio); background: var(--superficie); }
.fluxo-txt { display: grid; gap: 2px; justify-items: start; min-width: 0; }
.fluxo-titulo { font-size: 20px; font-weight: 400; }
.fluxo-txt > span { color: var(--tinta-2); font-size: 15px; }
.fluxo-txt .botao { margin-top: 4px; text-decoration: none; color: var(--tinta); }
/* one card per language with its four numbers: four units, read down the card, never added up */
.grade-ling { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.ling-card { padding: 14px 16px; display: grid; gap: 10px; align-content: start; color: var(--tinta); text-decoration: none; }
.ling-nums { display: grid; gap: 4px; margin: 0; }
.ling-nums > div { display: grid; grid-template-columns: minmax(0, 1fr) max-content; gap: 2px 10px; align-items: baseline;
  padding-bottom: 3px; border-bottom: 1.5px dotted var(--fio-leve); }
.ling-nums dt { color: var(--tinta-3); font-size: 13px; }
.ling-nums dd { margin: 0; text-align: right; }
.m-val b { font-size: 21px; font-weight: 400; font-variant-numeric: tabular-nums; }
.m-val small { color: var(--tinta-3); font-size: 12px; }
.sem-dado { color: var(--tinta-3); font-size: 14px; }
.ling-estado { margin: auto 0 0; color: var(--tinta-3); font-size: 13px; }
.ling-card .tl-abrir { justify-self: start; color: var(--app-tinta); font-size: 13.5px; }
.lista-pares { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.lista-pares small { color: var(--tinta-3); }

/* ---- #comparar: 2 to 4 languages in both experiments ------------------------------------------------------------------ */
/* the selection, always on top: every language a two-state button (aria-pressed), so swapping one is one click */
.comp-escolha { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-ling { display: inline-flex; align-items: center; gap: 7px; padding: 3px 12px 3px 4px; border: 2px solid var(--fio-leve); border-radius: 999px;
  background: var(--superficie); color: var(--tinta-2); font: 15px var(--fonte-mao); cursor: pointer; }
.chip-ling:hover { border-color: var(--fio); color: var(--tinta); }
.chip-ling[aria-pressed="true"] { border-color: var(--fio); background: var(--marca); color: var(--tinta); }
.chip-ling .logo { flex: 0 0 auto; display: grid; place-items: center; border: 2px solid var(--fio); border-radius: 50%; background: var(--superficie); }
.chip-ling .logo img { width: 60%; height: 60%; }
.comp-aviso { margin: 0; color: var(--tinta-3); font-size: 14px; }
.comp-aviso.limite { color: var(--alerta); }
/* one card per metric: its own scale, because the units have nothing to do with one another */
.metricas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 16px; }
.metrica { padding: 16px 20px 18px; display: grid; gap: 8px; align-content: start; }
.metrica h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 24px; font-weight: 400; }
.metrica h3 small { color: var(--tinta-3); font-size: 15px; }
.metrica .rk li { grid-template-columns: minmax(130px, 180px) minmax(0, 1fr) 72px 26px; }
.metrica .rk-trilho .sem-dado { position: absolute; inset: 0 auto 0 0; display: grid; align-items: center; }
.comp-tabela caption { text-align: left; padding: 10px 12px 8px; color: var(--tinta-3); font-size: 14px; }
.comp-tabela th[scope="col"] b { display: block; font-weight: 400; }
.comp-tabela th[scope="col"] small { display: block; color: var(--tinta-3); font-size: 12px; }
.comp-tabela th[scope="row"] { white-space: nowrap; }
@media (max-width: 560px) {
  .metrica .rk li { grid-template-columns: minmax(0, 1fr) 72px 26px; }
  .fatos > div { grid-template-columns: minmax(0, 1fr); }
  .fluxo-passo { grid-template-columns: minmax(0, 1fr); }
  .fluxo-passo .num-sub { grid-row: 1; }
}

/* the dense tables, folded away until asked for (the triangle stays: summary keeps its display: list-item) */
.detalhes { display: grid; gap: 10px; }
.detalhes > summary { cursor: pointer; font-size: 23px; margin-top: 10px; }
.detalhes > summary:hover { color: var(--tinta-2); }
.detalhes > summary .num-sub { display: inline-grid; vertical-align: middle; margin-right: 8px; }
.detalhes > summary small { color: var(--tinta-3); font-size: 15px; }
@media (max-width: 560px) {
  .nav-assunto { display: grid; }
  .detalhes > summary { font-size: 20px; }
}

/* ---- índice (P2) ---- */
/* the index of benchmarks (index.html, hub.js): one card per benchmark, a doorway with its state, period, top threes and cost */
.hub { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 16px; }
.hub .esqueleto { min-height: 300px; }
.bench-card { display: grid; gap: 12px; padding: 18px 22px; color: var(--tinta); text-decoration: none; }
a.bench-card:hover { background: #fffdf3; }
.bench-card h2 { margin: 0; font-size: 28px; font-weight: 400; line-height: 1.1; }
.bench-sub { margin: 0; color: var(--tinta-2); font-size: 14px; }
.bench-topo { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; }
.zz-estado.concluido { color: var(--bom); } .zz-estado.andamento { color: var(--alerta); }   /* the chip on its own, outside a .zz-item */
.bench-rks { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.bench-rks h3 { margin: 0 0 4px; font-size: 15px; color: var(--tinta-2); font-weight: 400; }
.hub-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.hub-lista li { display: flex; align-items: center; gap: 8px; }
.hub-lista .rk-nome { flex: 1; }
.hub-lista b { font-weight: 400; font-size: 18px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hub-lista small { color: var(--tinta-3); font-size: 12px; white-space: nowrap; }
.bench-rodape { margin: 0; color: var(--tinta-2); font-size: 13.5px; }
.bench-rodape.ruim { color: var(--ruim); }
#benchmarks .botao { font-size: 16px; padding: 6px 16px; text-decoration: none; color: var(--tinta); }

/* ---- cartão do host (P4) ---- */
/* the folder view: the reqs/s under the capacity in the ranking, the day chart (15 legend entries need room) and the host table */
.rank-linha .valor-b small { display: block; font-size: 13px; line-height: 1.1; color: var(--tinta-3); text-align: right; white-space: nowrap; }
.dia-host .plot { height: 340px; }
.tabela-host .stack-cab .logo { width: 34px; height: 34px; }
.tabela-host .stack-cab b { font-size: 16px; }
.tabela-host td a { white-space: nowrap; }

/* ---- linha do tempo e versões (P3) ---- */
/* a rehearsal on the timeline: grey, dotted, no number — a point in time, not a language's experiment */
.zz-item.ensaio .zz-bola .logo { border-style: dashed; box-shadow: none; filter: grayscale(1); opacity: .85; }
.zz-item.ensaio .zz-card { border-style: dashed; background: rgba(255, 255, 255, .7); box-shadow: none; }
.ensaio .zz-estado { color: var(--tinta-3); }
.zz-item.ensaio .zz-cap b { color: var(--tinta-2); font-size: 26px; }
.zz-nota { margin: 0; font-size: 13.5px; color: var(--tinta-2); }
/* what ran: the versions table, one row per stack */
.versoes-espera { min-height: 300px; }
#versoes-tabela th[scope="row"] { font-weight: 400; }
#versoes-tabela td { color: var(--tinta-2); white-space: normal; }   /* long names (Spring's) wrap instead of scrolling */

/* ---- página da linguagem (P5) ---- */
/* the reproduction cards: a plain title (no ═══), the reqs/s under the users, the rehearsals in a smaller row */
.rep-card h3::before, .rep-card h3::after { content: none; }
.rep-card h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rep-cap .rep-rps { display: block; margin: 4px 0 0; color: var(--tinta-2); font-size: 14px; }
.runs.ensaios .rep-card { font-size: .92em; opacity: .9; }
.runs.ensaios .rep-cap b { font-size: 28px; }
#ling-usuarios .secao-cabeca p .stack-n0 { display: inline; }
/* one reproduction at a time: the switch (.alternar, as the ranking's unit) and the block under it, without its own rule */
#ling-reps { flex-wrap: wrap; }
#ling-reps button.ensaio { border-style: dashed; }
#ling-bloco .bloco-stack { border-top: 0; padding-top: 0; }
.etl-ensaio button { font-size: 15px; }
/* the resources: one card per metric, each with its own scale; stacked bars split a total, a 2px surface gap between parts */
.recursos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 16px; }
.recursos article { padding: 14px 18px; display: grid; gap: 10px; align-content: start; }
.recursos h3 { margin: 0; font-size: 18px; font-weight: 400; }
.recursos > article > small, #ling-recursos .secao-cabeca small { color: var(--tinta-3); font-size: 13.5px; }
.recursos .barras .valor-b { font-size: 17px; }
.recursos .barras .nome { font-size: 14px; }
.empilhada { display: flex; height: 24px; border: 2px solid var(--fio); border-radius: 6px; overflow: hidden; background: var(--superficie-2); }
.empilhada i { display: block; height: 100%; }
.empilhada i + i { border-left: 2px solid var(--superficie); }
.legenda { display: flex; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--tinta-2); }
.legenda i { display: inline-block; width: 12px; height: 12px; border: 1.5px solid var(--fio); border-radius: 3px; vertical-align: -1px; margin-right: 4px; }
.comp-tabela td.versoes { color: var(--tinta-2); font-size: 13.5px; white-space: normal; }

/* the N0 concurrency line at the end of a section paragraph (language page): its own line, not a tail of the sentence */
.secao-cabeca p > .stack-n0 { display: block; margin-top: 6px; }

/* ---- fluxo do experimento 2 (animação) ---- */
/* the home page's import/export scene (fluxo-etl.js): a card with the controls in one wrapping row, the SVG stage full width
   (its viewBox scales, so the drawing shrinks whole on a phone) and the live count under it */
.fluxo-etl { padding: 16px 20px 14px; display: grid; gap: 10px; }
.fluxo-etl h3 { font-size: 20px; }
.fluxo-etl .dica { margin: 0; max-width: 90ch; color: var(--tinta-2); font-size: 14px; }
.fluxo-controles { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 14px; }
.fluxo-controles .alternar button { padding: 1px 12px; font-size: 15px; }
.fluxo-controles label { display: flex; align-items: center; gap: 6px; color: var(--tinta-2); }
.fluxo-controles select { padding: 2px 8px; border: 2px solid var(--fio-leve); border-radius: var(--raio-controle); background: var(--superficie); color: var(--tinta); }
.fluxo-controles select:hover { border-color: var(--fio); }
.fluxo-palco svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--fonte-mao); }
.fx-papel { fill: var(--superficie); stroke: var(--fio); stroke-width: 2; stroke-linejoin: round; }
.fx-dobra { fill: var(--superficie-2); stroke: var(--fio); stroke-width: 2; stroke-linejoin: round; }
.fx-titulo { font-size: 14px; fill: var(--tinta); }
.fx-linha { stroke: var(--tinta-3); stroke-width: 2.5; stroke-linecap: round; }   /* the text: grey dashes */
.fx-cabecalho { stroke: var(--tinta); }
.fx-corte { stroke: var(--ruim); stroke-width: 1.2; stroke-dasharray: 3 3; }
.fx-tesoura { font-size: 13px; fill: var(--ruim); }
.fx-banco { fill: #f3f0ff; stroke: var(--fio); stroke-width: 2; }   /* the cylinder, in PostgreSQL's pastel */
.fx-pg { font-size: 13px; fill: var(--s-pg); }
.fx-tab rect { fill: var(--superficie); stroke: var(--fio); stroke-width: 1.5; }
.fx-tab text { font-size: 12px; fill: var(--tinta); pointer-events: none; }
.fx-tab.aceso rect { fill: var(--marca); }
.fx-fk { stroke: var(--tinta-3); stroke-width: 1.2; marker-end: url(#fx-seta); }
.fx-seta { fill: var(--tinta-3); }
.fx-guia { fill: none; stroke: var(--fio-leve); stroke-width: 2; stroke-dasharray: 6 6; marker-end: url(#fx-seta); }
.fx-rotulo { font-size: 13px; fill: var(--tinta-3); }
.fx-tira rect { fill: var(--superficie); stroke: var(--fio); stroke-width: 1.5; }
.fx-tira line { stroke: var(--tinta-3); stroke-width: 2; stroke-linecap: round; }
.fx-selo rect { fill: var(--marca); }   /* the badge under the cylinder: highlighter behind the words */
.fx-selo text { font-size: 13px; fill: var(--tinta); }
.fx-carimbo rect { fill: none; stroke: var(--bom); }   /* the SHA-256 stamp, as .carimbo.bom: double outline, crooked */
.fx-carimbo text { fill: var(--bom); letter-spacing: .04em; }
.fluxo-legenda { margin: 0; display: flex; flex-wrap: wrap; gap: 2px 18px; color: var(--tinta-2); font-size: 14px; font-variant-numeric: tabular-nums; }
#fluxo-contador { color: var(--tinta); }
@media (max-width: 560px) {   /* phones: the controls one under the other; the stage shrinks whole */
  .fluxo-etl { padding: 14px 14px 12px; }
  .fluxo-controles { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ---- réguas de recursos ---- */
/* where the language stands among the others (painel.js: regua): a thin track from 0 to the largest value, a grey dot per other
   stack (hover: full ink and its name), this stack's dot in its colour with a surface ring and the value above it, a tick per
   reproduction; 0 and the top under the ends, the rank and the extremes below. The ETL card is the widest: both columns. */
.rg { display: grid; gap: 2px; font-variant-numeric: tabular-nums; }   /* .regua is the home page's card grid */
.rg-trilho { position: relative; height: 2px; margin: 32px 8px 6px; background: var(--fio-leve); border-radius: 1px; }
.rg-trilho i, .rg-valor { position: absolute; top: 50%; }
.rg-ponto { width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: var(--tinta-3); opacity: .55; box-shadow: 0 0 0 2px var(--superficie); }
.rg-ponto::after { content: ""; position: absolute; inset: -6px; }   /* a hit target larger than the dot */
.rg-ponto:hover { opacity: 1; z-index: 2; }
.rg-ponto.atual { width: 16px; height: 16px; margin: -8px 0 0 -8px; opacity: 1; z-index: 1; box-shadow: 0 0 0 2px var(--superficie), 0 0 0 4px var(--fio); }
.rg-rep { width: 2px; height: 14px; margin: -7px 0 0 -1px; background: var(--tinta-2); }
.rg-valor { top: auto; bottom: 14px; transform: translateX(-50%); font-size: 17px; font-weight: 400; white-space: nowrap; }
.rg-eixo { display: flex; justify-content: space-between; margin: 0 8px; color: var(--tinta-3); font-size: 12.5px; }
.rg-legenda { margin: 2px 0 0; color: var(--tinta-2); font-size: 14px; }
.recursos article:last-child { grid-column: 1 / -1; }
#ling-recursos .rk-sub.alerta { color: var(--alerta); }
.rg.no-fim .rg-eixo small:last-child, .rg.no-inicio .rg-eixo small:first-child { visibility: hidden; }   /* the dot is on it */

/* ---- barra e títulos ---- */
/* the top bar by level: the hub (/) has the brand and its subtitle and nothing else to click (the cards are the way in); a
   benchmark's pages have the trail of levels under the brand (Benchmarks › the benchmark, the current one in ink) and the
   benchmark's own tabs. There the bar is a grid instead of the wrapping row: the trail sits under the brand, the tabs and the
   language switch (i18n.js appends it last) span both rows; on a phone the switch stays beside the brand and the trail and the
   tabs take a row each, in that order */
.barra:has(.trilha-topo) { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; row-gap: 2px; }
.barra:has(.trilha-topo) .abas { grid-area: 1 / 2 / 3 / 3; }
.barra:has(.trilha-topo) .idiomas { grid-area: 1 / 3 / 3 / 4; }
/* placed, not auto-placed: until i18n.js appends the switch, the trail took the empty third column of row 1, and the switch
   arriving pushed it to row 2 and the whole page down (CLS 0.68 on every first load) */
.barra:has(.trilha-topo) .trilha-topo { grid-area: 2 / 1; }
.trilha-topo { display: flex; flex-wrap: wrap; gap: 0 6px; font-size: 13px; color: var(--tinta-3); }
.trilha-topo a { color: inherit; text-decoration: none; }
.trilha-topo a:hover { color: var(--tinta); }
.trilha-topo a[aria-current="page"] { color: var(--tinta-2); }
.trilha-topo a:not(:last-child)::after { content: "›"; margin-left: 6px; color: var(--tinta-3); }
@media (max-width: 760px) {
  .barra:has(.trilha-topo) { grid-template-columns: minmax(0, 1fr) auto; }
  .barra:has(.trilha-topo) .idiomas { grid-area: 1 / 2; }
  .barra:has(.trilha-topo) .trilha-topo { grid-column: 1 / -1; }
  .barra:has(.trilha-topo) .abas { grid-area: 3 / 1 / 4 / -1; margin: 6px 0 0 -12px; }   /* the tabs' text starts under the brand's */
}

/* ---- comparação ampliada ---- */
/* up to the 15 languages per card (painel.js: cartaoMetrica), 26px a row: a 22px logo, a 20px track, a 4px gap. The measurement
   picker (#comp-metricas) is an .alternar in two labelled rows; "todas"/"limpar" sit at the end of the language chips. A .par card
   draws two thin bars one over the other (p95 full tone, p99 pastel, 2px of surface between), a .pilha card a stacked bar. */
.comp-acoes { margin-left: auto; display: flex; gap: 6px; }
.comp-acoes .botao { padding: 2px 10px; font-size: 14px; }
#comp-metricas { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 12px; align-items: center; }
#comp-metricas small { color: var(--tinta-3); font-size: 13px; }
#comp-metricas div { display: flex; flex-wrap: wrap; gap: 4px; }
#comp-metricas button { padding: 1px 10px; font-size: 15px; }
.metrica .rk { gap: 4px; }
.metrica .rk li { grid-template-columns: minmax(130px, 180px) minmax(0, 1fr) 90px 26px; gap: 8px; min-height: 22px; }
.metrica.par .rk li { grid-template-columns: minmax(130px, 180px) minmax(0, 1fr) 118px 26px; }
.metrica .rk-trilho { height: 20px; }
.metrica .rk-val { font-size: 17px; white-space: nowrap; }
.metrica h3 .menor { font-size: 13px; }
.comp-tabela td.versoes { min-width: 200px; }   /* with many columns the table scrolls sideways rather than stacking the versions word by word */
.metrica.par .rk-trilho { display: grid; gap: 2px; }
.metrica.par .rk-trilho i { position: static; border-width: 1.5px; border-radius: 4px; }
.metrica .empilhada { height: 100%; }
.metrica .legenda { font-size: 12.5px; }
@media (max-width: 560px) {
  #comp-metricas { grid-template-columns: minmax(0, 1fr); }
  .metrica .rk li, .metrica.par .rk li { grid-template-columns: minmax(0, 1fr) 118px 26px; }
}
.metrica .empilhada i { position: static; inset: auto; border: 0; border-radius: 0; transform: none; }   /* the ranking track rule above would pile the segments at the left */

/* ---- the painel's tooltip (dica.js), in place of the browser's title box ---- */
.dica-flutuante { position: fixed; left: 0; top: 0; z-index: 50; max-width: 320px; padding: 8px 12px; background: var(--superficie); border: 2px solid var(--fio);
  border-radius: var(--raio-controle); box-shadow: var(--sombra); font: 14px/1.35 var(--fonte-mao); color: var(--tinta); pointer-events: none; white-space: pre-line; }
.dica-flutuante::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 12px; height: 12px; margin-left: -6px; background: inherit;
  border: 2px solid var(--fio); border-top: 0; border-left: 0; transform: rotate(45deg); }   /* the little tail, pointing at the element */
.dica-flutuante.embaixo::after { bottom: auto; top: -8px; transform: rotate(-135deg); }
.dica-flutuante .dica-principal { font-size: 15px; }
.dica-flutuante div + div { color: var(--tinta-2); font-size: 13.5px; }

/* ---- modelo de execução ---- */
/* the home's rankings grouped by how the code runs (inicio.js cartaoRanking, o.grupo): a band per model, AOT → JIT → interpreted.
   The band (li.rk-grupo) is a row of the card's own grid — name, track, value — with its rows in a list under it, so the median
   tick (u.rk-mediana, solid; the video's line stays dashed) sits on the same scale as the bars. The positions stay the whole
   card's: li.rk-topo keeps the first three highlighted where the card's nth-child rule would crown each band's first three. */
.rank-controles { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.rk-grupo + .rk-grupo { padding-top: 10px; border-top: 2px dashed var(--fio-leve); }
.rk-grupo > ol { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rk-modelo { display: grid; min-width: 0; line-height: 1.2; }
.rk-modelo b { font-size: 17px; font-weight: 400; }
.rk-modelo small { color: var(--tinta-3); font-size: 12px; }
.rk-grupo > .rk-val { color: var(--tinta-2); font-size: 17px; }
.rk-mediana { position: absolute; top: -5px; bottom: -5px; margin-left: -1px; border-left: 2px solid var(--tinta-2); }
.rk .rk-grupo li .rk-pos { color: var(--tinta-3); background: none; }
.rk .rk-grupo li.rk-topo .rk-pos { color: var(--tinta); background: linear-gradient(transparent 60%, var(--marca) 60%); }
.rankings > .x-faltam { grid-column: 1 / -1; }   /* the note under both grouped cards */
/* the stack cards: the model as a grey chip beside the version line, like the timeline's .zz-estado */
.stack-ver { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.modelo-chip { padding: 0 8px; border: 1.5px solid; border-radius: 999px; color: var(--tinta-3); font-size: 12px; font-style: normal; white-space: nowrap; }