/* ===== rail as word bubbles, native scrollbar hidden ===== */
html{scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{display:none;width:0;height:0}
#rail{background:none!important;border-right:0!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
#rail .track,#railFill,#playhead{display:none!important}
.rail-kf i{display:none}
.rail-kf{left:18px;padding:.44rem .9rem;border-radius:999px;
  background:var(--glass);border:1px solid var(--glass-line);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);
  box-shadow:inset 0 1px 1px var(--spec2),0 6px 18px rgba(0,0,0,.12)}
html[data-theme="light"] .rail-kf{background:rgba(255,255,255,.68);border-color:rgba(255,255,255,.95);
  box-shadow:inset 0 1px 1px #fff,inset 0 0 0 1px rgba(23,67,242,.06),0 8px 20px rgba(36,45,82,.08)}
.rail-kf .lbl{opacity:1!important;transform:none!important;
  font-family:var(--mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mute);transition:color .3s ease}
.rail-kf.past{border-color:rgba(107,132,255,.35)}
html[data-theme="light"] .rail-kf.past{border-color:rgba(23,67,242,.3)}
.rail-kf.on{background:rgba(23,67,242,.26);border-color:var(--blue)}
html[data-theme="light"] .rail-kf.on{background:rgba(23,67,242,.1)}
.rail-kf.on .lbl,.rail-kf:hover .lbl{color:var(--ink)}
@media (prefers-reduced-motion: no-preference){
  .rail-kf{transition:transform .5s var(--spr),background-color .3s ease,border-color .3s ease,box-shadow .3s ease}
  .rail-kf:hover{transform:translateY(-50%) scale(1.07);border-color:var(--blue)}
  .rail-kf:active{transform:translateY(-50%) scale(.96)}
}