.seg {
  background: var(--c1);
  border: 1px solid var(--border-on-c2);
  border-radius: var(--border-radius);
  padding: 3px;
}

.scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.scroll::-webkit-scrollbar { display: none; }

.scroll.fade-l {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px);
  mask-image: linear-gradient(90deg, transparent, #000 28px);
}
.scroll.fade-r {
  -webkit-mask-image: linear-gradient(270deg, transparent, #000 28px);
  mask-image: linear-gradient(270deg, transparent, #000 28px);
}
.scroll.fade-l.fade-r {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent);
}

.track {
  position: relative;
  display: flex;
  width: max-content;
  min-width: 100%;
}

.thumb {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  background: var(--c2);
  border: 1px solid var(--border-strong-on-c2);
  border-radius: calc(var(--border-radius) - 3px);
  box-shadow: var(--shadow);
  transition: transform .22s ease, width .22s ease;
  pointer-events: none;
}

.track input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.track label {
  position: relative;
  flex: 1 0 auto;
  text-align: center;
  padding: 7px 14px;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  color: rgba(var(--c5-rgba), .6);
  transition: color .2s;
}
.track input:checked + label {
  color: var(--c4);
  font-weight: 600;
}
.track input:focus-visible + label {
  outline: 2px solid var(--c3);
  outline-offset: -2px;
  border-radius: calc(var(--border-radius) - 3px);
}/* Frame: static, always visible */