/* barra.css — barra de rolagem fina (js/barra.js). Camada fixa à direita, sem ocupar largura do layout.
   mix-blend-mode: difference com polegar branco = cinza claro sobre as seções escuras e cinza escuro sobre as
   brancas, sem trocar de cor por seção. Engrossa um pouco no hover e no arrasto. */
.barra{position:fixed;z-index:60;top:0;right:0;width:10px;height:100vh;mix-blend-mode:difference;pointer-events:none}
.barra__polegar{position:absolute;top:0;right:2px;width:4px;border-radius:2px;background:#fff;opacity:.45;
  pointer-events:auto;cursor:grab;touch-action:none;
  transition:width .2s cubic-bezier(.215,.61,.355,1),opacity .2s cubic-bezier(.215,.61,.355,1)}
.barra:hover .barra__polegar,.barra.is-arrasto .barra__polegar{width:6px;opacity:.7}
.barra.is-arrasto .barra__polegar{cursor:grabbing}