/* ═══ BARRA DE ROLAGEM ═══
   A do sistema é cinza, grossa e branca no Windows: cortava o tema em toda
   tela e todo popup com scroll. Aqui ela vira um traço fino no tom da linha
   da página, que escurece no hover e fica neon enquanto se arrasta.

   Vale para a janela e para qualquer caixa com overflow (modais, listas,
   tabelas largas, chave de torneio).

   Os tokens têm fallback de propósito: nas páginas do app `--line-bright`
   existe e acompanha o tema claro/escuro sozinho; nas páginas de marketing e
   do blog, que não carregam os tokens, cai num cinza translúcido que
   funciona nos dois fundos.

   `background-clip: content-box` com borda transparente é o que dá o respiro
   lateral sem precisar de um segundo elemento. */

*{
  scrollbar-width: thin;
  scrollbar-color: var(--line-bright, rgba(148,163,184,.38)) transparent;
}

::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
  background: var(--line-bright, rgba(148,163,184,.38));
  border-radius:99px;
  border:3px solid transparent;
  background-clip:content-box;
}
::-webkit-scrollbar-thumb:hover{
  background: var(--ink-mute, rgba(100,116,139,.75));
  background-clip:content-box;
}
::-webkit-scrollbar-thumb:active{
  background: var(--neon-deep, #A8DC00);
  background-clip:content-box;
}
::-webkit-scrollbar-corner{background:transparent}