.r-tab {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.02em;     
  white-space: nowrap;        
  padding: 9px 13px;
  line-height: 1.15;
  border-radius: var(--r);
  transition: color .12s ease, background-color .12s ease;
}

.r-tab.active {
  box-shadow: inset 0 2px 0 0 rgb(var(--acc-rgb));
}

.r-tab:hover:not(.active) {
  background: rgba(var(--acc-rgb), 0.05);
}

.r-tabs {
  gap: 1px;
  padding: 2px 4px;
}

html, body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.r-tab {
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0;
}

button {
  border-radius: var(--r);
  transition: background-color .18s cubic-bezier(.4,0,.2,1),
              border-color .18s cubic-bezier(.4,0,.2,1),
              opacity .18s cubic-bezier(.4,0,.2,1);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}